导航间距填充问题

Question

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

如果某人有一秒可以让你知道为什么，当你将鼠标悬停在一个元素上时，这些行项目之间的距离就不一样了 - 左边的距离比右边的距离

任何指导赞赏！

Answer 1

我在这里分道扬琴：http://jsfiddle.net/tLzST/1/

您的HTML无效，UL不能成为UL的直接子级，因此我将您的.submenu列表放在LI中。一两种风格调整。

Answer 2

ul.subnav中的

将您的填充更改为：padding: 0 5px 10px 1px;

如果您在桌面上执行了ctrl-a，您会看到border-right行实际上具有自动添加到其自身的3像素填充。如果你考虑到填充，你的代码实际上工作正常。 在任何情况下都是新的jsfiddle：http://jsfiddle.net/kCXrX/5/

Answer 3

我添加了ul.subnav {border-left: solid 1px transparent;padding: 0 5px 10px 0;}，现在看起来对我来说更好。

Answer 4

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

Answer 5

如果橙色悬停离开＆amp;正确的白色间距差异是问题，请检查以下代码     

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