锚标记上的水平菜单垂直填充不会生效

Question

我想知道为什么在下面的例子中,顶部和底部填充对左侧和右侧的锚标签没有影响？

<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;
    }

示例:链接

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

我也尝试了这一点,有一个浮动,而不是显示:内联的列表中的项目和它的工作,因为我预料到.所以我想如果我有一个次要问题,那么浮点数之间的区别是什么？和显示:内联？我正在阅读浮点规格,它听起来像一个浮动仍然是一个在线内联盒,所以有点像内联块？

我感谢任何输入,这不是我完成一个项目或任何事情我需要知道的东西,但我想知道为什么.

谢谢
列维

Answer 1

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

您可以执行以下操作:

a
{
    display: block;
    float: left;
}

浮动是必要的,因为块级元素占据了它们所在容器的整个宽度.你必须编写一些额外的规则来清除它.无论哪种方式,都要看看它是如何运作的.