Css 定位标记上的水平菜单垂直填充不'；不生效

我想知道为什么在下面的示例中，顶部和底部填充对锚定标记没有影响，而左侧和右侧没有影响

<ul id="nav">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
    <li><a href="#">Five</a></li>
</ul>

    #nav{
        list-style:none;
    }
    #nav li{
        border:1px solid #666;
        display:inline;
       /*If you do it this way you need to set the top and bottom 
         padding to be the same here as under #nav li a
        padding:8px 0; */
    }
    #nav li a{
        padding:8px 16px;
    }

#导航{
列表样式：无；
}
#李海军{
边框：1px实心#666；
显示：内联；
/*如果你这样做，你需要设置顶部和底部
此处的填充与#nav li a下的填充相同
填充：8px0*/
}
#李娜{
填充：8px 16px；
}

例如：

所以我的主要问题是，为什么顶部和底部填充对列表项没有影响，而左侧和右侧有影响

我确实尝试过在列表项上使用float而不是display:inline，并且它按照我的预期工作。所以我想如果我有第二个问题的话，那就是浮动之间的区别是什么：左；和一个显示：内联？我在读这篇文章，听起来浮点仍然是一个在线框，所以有点像内联块

我感谢任何意见，这并不是我完成一个项目或任何事情所需要知道的，但我想知道为什么

谢谢

---

Levi

锚是内联元素。只有块级元素可以更改顶部/底部属性

您可以通过执行以下操作来覆盖：

a
{
    display: block;
    float: left;
}

---

浮动是必要的，因为块级元素占据了它们所在容器的整个宽度。你必须写一些额外的规则来在某个时候清除它。不管是哪种方式，都可以看一看它是如何工作的。

CSS规范中一个模糊的角落实际上指出，

display:block

是

float:left

不必要的伴侣

无意义填充的原因是。。。内联元素。有趣的事实：内联元素将采用填充值，但填充不会影响周围内容的布局

要获得给定上述标记和样式的所需结果，我建议只需将

li

元素的

display

值更改为

inline block

，并使用

行高

值或

位置：relative

等来控制链接的垂直组成，同时将所有框值限制在列表项中

浏览器越老，这些风格的车就越多；关于这一点的细节可能会持续几段

在使用此类解决方案时，需要记住三个支持问题：

在IE6

display:inline块

仅应用于运行时

display

值为

inline

的元素。HTML4规范可以帮助您在该规范中区分绵羊和山羊

Firefox2.x不支持

内联块

值，但有

-moz内联块

CSS扩展

内联块元素之间呈现的间隙源空格与内联元素之间呈现的间隙源空格相同，如果没有仔细设置源标记格式，可能会产生不希望的结果

---

我更喜欢将LI设置为float:left，然后在A本身上使用display:block、padding、border和margin。使用CSS重置还可以帮助在使用列表时保持浏览器之间的一致性。请看：有无数种方法可以达到预期的效果。我从来没有设置所有的锚来阻挡，但这只是一个简单的例子：）@Diodeus-啊，是的，在我上面的第二个例子中，我就是这么做的@Danten-谢谢你的回答，你知道我在哪里可以找到一些关于内联和块以及它们的区别的文档吗？我通读了这篇文章，但没有明确指出内联不能改变顶部/底部属性。李维：我从一本名为《防弹网络设计》的书中获得了大部分实用设计知识。如果你能以便宜的价格买到它，它是值得的，即使它已经有几年的历史了。至于内联和块之间的区别，请尝试此链接。最重要的区别是，块跨越整个页面，而内联线则没有。Ben，感谢“。内联元素将采用填充值，但填充不会影响周围内容的布局。”我早就忘记了这种行为，当我声明在导航链接上填充底部以抵消其下划线时，我感到很惊讶——“只是尝试”期望它不起作用——结果它起了作用！寻找解释把我带到了这里。在装饰类中使用方便的（有意的？）行为，如导航中的

。当前页面

。