水平菜单锚点的垂直内边距无效。

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

示例：链接

我的主要问题是，为什么上下填充对列表项没有影响，而左右填充有影响？

我尝试使用浮动而不是在列表项上使用display:inline，这个按照我预期的工作了。所以我想如果我有一个次要问题，那就是float:left;和display:inline之间的区别是什么？我正在阅读浮动规范，听起来浮动仍然是在线内的框，类似于inline-block？

感谢任何意见，这并不是我完成项目所必须知道的，但我想知道为什么。

谢谢
Levi

- Levi

Answer 1

锚点是行内元素。只有块级元素才能更改顶部/底部属性。

你可以通过以下方式进行覆盖：

a
{
    display: block;
    float: left;
}

使用float是必要的，因为块级元素会占据其所在容器的整个宽度。您将需要编写一些额外的规则来清除它。无论如何，尝试一下，看看它是如何工作的。

- Danten

---

我更喜欢将LI设置为float:left，然后在A标签上使用display:block、padding、border和margin属性来进行样式设置。 - Diodeus - James MacFarlane

使用CSS重置还可以帮助在使用列表时在浏览器之间保持一致性。请参见：http://developer.yahoo.com/yui/3/cssreset/ - Diodeus - James MacFarlane

有无数种方法可以实现所需的结果。我从来没有将所有锚点设置为块，但这只是一个简单的例子 :) - Danten

@Diodeus - 啊，是的，在我上面的第二个例子中，我就是这么做的。 @Danten - 感谢您的回答，您知道在哪里可以找到有关内联和块之间差异的文档吗？我阅读了http://www.w3.org/TR/CSS2/visuren.html，但没有明确说明内联无法更改顶部/底部属性。 - Levi

Levi：我从一本名为《防弹网页设计》的书中获得了大部分实用的设计知识。即使这本书已经出版几年了，但如果你能以便宜的价格买到它，那么它仍然是值得的。至于内联和块之间的区别，请尝试访问此链接http://www.webdesignfromscratch.com/html-css/css-block-and-inline.php。最重要的区别是块跨越整个页面，而内联不会。 - Danten

Answer 2

CSS规范的一个不太为人所知的角落指出，`display:block`和`float:left`的搭配是没有必要的。

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

为了获得所需的结果，建议您仅更改`li`元素的`display`值为`inline-block`，并使用`line-height`值或`position:relative`等来控制链接的垂直组合，同时将所有框值限制在列表项中。

浏览器越老，这些样式就越容易出现错误；关于这一点的细节可以写几段。

在使用这些解决方案时，请记住以下三个支持问题：

1. 在IE6中，`display:inline-block`仅适用于运行时`display`值为`inline`的元素。HTML4规范可以帮助您区分羊和山羊。

2. Firefox 2.x不支持`inline-block`值，但具有`-moz-inline-block` CSS扩展。

3. 内联块元素之间的插入源空格与内联元素之间的插入源空格相同，这可能会在没有仔细的源标记格式化的情况下导致不良结果。

- Ben Henick

---

Ben，感谢你提供的“内联元素将采用填充值，但该填充不会影响周围内容的布局。”我早就忘记了这种行为，当我在导航链接上声明padding-bottom以抵消其下划线时感到惊讶-“只是尝试”期望它不起作用-但它确实起作用了！搜索解释带我来到这里。在装饰类中使用方便（预期？）的行为，如导航中的.current-page。 - Arta