导航间距填充问题

Question

我正在构建一个导航位置，尽管我用填充操纵，但我无法在我的子菜单之间创建相等的距离。这有点难以描述，所以我在这里创建了一个jsfiddle：http://jsfiddle.net/kCXrX/

如果有人有秒，你可以让我知道为什么，当你将鼠标悬停在元素上时，行项之间的距离不一样 - 有左侧比右侧更大的距离

任何指导赞赏！

Answer 1

我已经分叉的提琴在这里：http://jsfiddle.net/tLzST/1/

你的HTML是无效的，UL可以不UI的直接孩子，所以我已经把内LIS你.submenu名单。一种或两种风格的调整也是如此。

Answer 2

我已经加入了ul.subnav {border-left: solid 1px transparent;padding: 0 5px 10px 0;}，现在它看起来更适合我。

Answer 3

只是因为使用内联块才出现额外的填充。尝试删除此属性（display:inline-block）并将其替换为float:left。 现在，是时候调整.navigation，以便通过添加overflow:hidden;来强制包含subnav（浮动问题）。 我已经编辑你的小提琴，看看它。 http://jsfiddle.net/kCXrX/

Answer 4

在ul.subnav改变你的填充，以这样的：padding: 0 5px 10px 1px;

如果你做你的桌子上一个CTRL-A，你会看到你border-right行实际上已经似乎是自动添加到自己一个3像素填充。如果考虑到这个填充，你的代码实际上可以正常工作。 在任何情况下继承人新的jsfiddle：http://jsfiddle.net/kCXrX/5/

Answer 5

如果橙色悬停左&右白色间距差异是问题，请检查以下代码。

 
    ul.subnav { 
     border-right: solid 1px; 
     display: inline-block; 
     height: 80px; 
     padding: 0 5px 10px 1px; 
     vertical-align: top; 
     width: 116px; 
    }