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

示例：Link

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

我确实尝试this out使用浮点而不是显示：在列表项上内联，它按照我的预期工作。所以我想如果我有一个次要问题那么浮点数是什么呢？和显示：内联？我正在阅读the float spec，听起来像浮动仍然是一个在线内联盒，所以有点像内联块？

我感谢任何输入，这不是我完成项目或任何事情所需要知道的事情，但我想知道原因。

感谢
列维

Answer 1

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

您可以执行以下操作：

a
{
    display: block;
    float: left;
}

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

Answer 2

CSS规范的一个不起眼的角落实际上指出display: block是float: left的不必要的伴侣。

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

要根据上面的标记和样式获得所需的结果，我建议您只需将display元素的li值更改为inline-block并使用line-height值或position: relative等控制链接的垂直构图，同时将所有框值限制在列表项中。

浏览器越旧，这些风格就越小;关于这方面的细节可以继续几段。

使用这些解决方案时，需要记住三个支持问题：

在IE6中，display: inline-block仅适用于运行时display值为inline的元素。 HTML4规范可以帮助你告诉那只羊山羊。
Firefox 2.x不支持inline-block值，但确实有-moz-inline-block CSS扩展名。
非线性源元素在内联块元素之间呈现，因为它位于内联元素之间，如果没有仔细的源标记格式化，这可能会带来不良结果。

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

2 个答案: