导航间距填充问题答案

【问题标题】：navigation spacing padding issue导航间距填充问题
【发布时间】：2012-02-19 01:26:13
【问题描述】：

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

如果有人有时间，你能告诉我为什么，当你将鼠标悬停在一个元素上时，行项目之间的距离是不一样的 - 左边的距离比右边的大

任何指导表示赞赏！

【问题讨论】：

我不确定您的问题是什么。演示对我来说看起来不错。
我自己看了几秒钟才明白。继续悬停。如果你看橙色悬停是如何显示的，右垂直线到橙色的距离和左垂直线到橙色的距离是不一样的。他想把它修好。
@JohnRiselvato 感谢您的澄清

标签： css navigation padding

【解决方案1】：

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

您的 HTML 无效，UL 不能是 UL 的直接子级，因此我已将您的 .submenu 列表放在 LI 中。一到两个样式调整，也是。

【讨论】：

感谢您的信息 - 我会知道有关此规则的未来

【解决方案2】：

在 ul.subnav 中将您的填充更改为：padding: 0 5px 10px 1px;

如果你在你的桌子上做了一个 ctrl-a，你会看到你的border-right 行实际上有一个似乎是自动添加到自身的 3 像素填充。如果您考虑到该填充，您的代码实际上可以正常工作。无论如何继承新的jsfiddle：http://jsfiddle.net/kCXrX/5/

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

ul.subnav { 右边框：实心 1px；显示：内联块；高度：80px； 内边距：0 5px 10px 1px； 垂直对齐：顶部；宽度：116px； }

【讨论】：