Question

我的菜单有CSS问题。

通过CSS我已将填充添加到li。

li有display: inline。

当我设置为inline-block时，它会起作用，但我想知道为什么它不适用于inline。在我的理解中，填充应该与内联元素一起使用。

HTML

<header>
<nav>
  <ul id="mainmenu">
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#" class="active">Users</a></li>
    <li><a href="#" class="active">Rankings</a></li>
    <li><a href="#" class="active">In the press</a></li>
    <li><a href="#" class="active">Blog</a></li>
  </ul>
</nav>
</header>

CSS

body { font-family: Arial; font-size: 11px; margin: 0; padding: 0; }
header nav { height: 25px; background: #eeeeee; }
header nav ul { list-style-type: none; margin: 0 auto; padding: 0; width: 960px; }
header nav li { display: inline; padding: 10px 5px; }

工作演示

http://jsfiddle.net/4QLmp/

PS浏览器是Chrome Canary

Answer 1

填充是存在的，但由于<li>被定义为内联，因此它们与同一文本基线对齐。这会切断页面边框顶部以外的顶部填充。如果你确实将css更改为：

header nav li {display：inline;填充：20px 5px;边框：1px纯红色;位置：相对;顶部：50px;}

以便<ul>被推下来，你会看到填充物存在。 inline-block不遵循相同的文本对齐规则，因此所有内容都被推下，因此整个块都可见。

Answer 2

header nav li { display: inline; padding: 10px 5px; }

UPD：

W3C的CSS2规范指出，对于Inline，未替换元素，“'height'属性不适用，但框的高度由'line-height'属性给出”。

我的顶部填充物在哪里？

2 个答案: