导航间距填充问题
我正在构建一个导航，尽管我摆弄了填充，但我无法在子菜单之间创建相等的距离。这有点难以描述，所以我在这里创建了一个jsfiddle： http://jsfiddle.net/kCXrX/
如果有人有时间，您可以让我知道为什么，当您将鼠标悬停在元素上时，行项目之间的距离不一样 - 左侧的距离比右侧的距离更大
任何指导表示赞赏！
I am building a navigation where, despite my fiddling with padding, I cannot create equal distances between my sub menu's. It's a little hard to describe so I have created a jsfiddle here: http://jsfiddle.net/kCXrX/
If someone has a sec could you let me know why, when you hover over a element the distance between the line items are not the same - there is a greater distance on the left than on the right
Any guidance appreciated!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
我在这里分叉了你的小提琴： http://jsfiddle.net/tLzST/1/
你的 HTML无效，UL 不能是 UL 的直接子级，因此我已将您的 .submenu 列表放入 LI 中。也可以进行一两次风格调整。
I've forked your fiddle here: http://jsfiddle.net/tLzST/1/
Your HTML was invalid, ULs can't be direct children of ULs, so I've put your .submenu lists within LIs. One or two style tweaks, too.
在 ul.subnav 中将填充更改为：
padding: 0 5px 10px 1px;
如果你在桌子上按下 ctrl-a，你会看到你的
border-right行实际上自动添加了一个似乎是 3 像素的填充。如果您考虑到该填充，您的代码实际上可以正常工作。无论如何，这是新的 jsfiddle： http://jsfiddle.net/kCXrX/5/
in ul.subnav change your padding to this:
padding: 0 5px 10px 1px;
if you did a ctrl-a on your table, you will see your
border-rightline actually has what seems to be a 3 pixel padding automatically added to itself. If you take that padding into account your code actually works fine.in any case heres the new jsfiddle: http://jsfiddle.net/kCXrX/5/
我添加了 ul.subnav {border-left:solid 1pxtransparent;padding:0 5px 10px 0;} 现在它对我来说看起来更好了。
I've added
ul.subnav {border-left: solid 1px transparent;padding: 0 5px 10px 0;}and now it looks beter to me.出现额外的填充只是因为您正在使用内联块。尝试删除此属性 (
display:inline-block) 并将其替换为float:left。现在，是时候调整 .navigation 了，以便通过添加
overflow:hidden;来强制包含子导航（浮动问题）。我已经编辑了你的小提琴，你看一下。 http://jsfiddle.net/kCXrX/
The extra padding appear just because you are using inline-block. try to remove this property (
display:inline-block) and replace it withfloat:left.now, it's time to tweak the .navigation so it force to containt the subnav (floating issue) by adding
overflow:hidden;.i have edit your fiddle, take a look at it. http://jsfiddle.net/kCXrX/
如果橙色悬停在左侧&右白间距差异是问题所在，请检查以下代码。
ul.subnav { border-right: solid 1px; display: inline-block; height: 80px; padding: 0 5px 10px 1px; vertical-align: top; width: 116px; }if orange hover left & right white spacing difference is the issue, check following code.
ul.subnav { border-right: solid 1px; display: inline-block; height: 80px; padding: 0 5px 10px 1px; vertical-align: top; width: 116px; }