CSS 水平菜单：display:inline和block？使链接覆盖整个LI？

Question

通常，为了使链接填满整个 li，我使用 display: block;。但是，在水平菜单中，我需要将其设置为 display:inline;，以便一行显示。我尝试过 display:inline-block;，但没有帮助。我看到过实现此目的的水平菜单，但无法从它们的源代码中找到方法。

有什么想法吗？谢谢。

- MrBubbles

---

你给 li 标签添加了宽度吗？ - Kyle

你有使用的代码示例吗？ - graham

Answer 1

将height和width应用到父级li元素，然后：

a {
display: inline-block;
height: 100%;
width: 100%;
}

JS Fiddle演示。

- David Thomas

---

display: inline-block 在ie7和ie6上无法正常工作，因此这不是一个好的解决方案。 - Fatih Acet

@Fatih：引用PPK的话：“IE 6/7仅接受具有自然display:inline属性的元素。”（http://www.quirksmode.org/css/display.html）而`a`元素“自然”是`display:inline`。 - David Thomas

Answer 2

ul {
    width: 100%;
    overflow: hidden;
}

li {
    float: left;
    list-style: none;
}

li a {
    float: left;
    padding: 5px;
    background: red;
    color: white;
}

请查看：http://pastehtml.com/view/1cdzwnz.html

- Finbarr

---

啊，我没想到可以使用 float。我认为我更喜欢 inline 或 inline-block，但值得记住。 - Nathan MacInnes

好的，有什么特别的原因吗？display: inline 不允许应用垂直内边距/外边距。 - Finbarr

Answer 3

应该可以这样做：

ul.menu>li {
    display: inline-block;
    width: 40px;
    border: 1px black solid;
}
ul.menu>li>a {
    display: block;
}

- Nathan MacInnes

Answer 4

这是你的设置吗：

<ul id="nav">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
</ul>

你的链接不会填充 <li>，但是 <li> 仍然是一个块级元素。将 <li> 设置为 display: inline：

ul#nav li {display: inline;}

或者将li浮动并给它一个宽度：

ul#nav {overflow: hidden;}
ul#nav li {float: left; width: 50%;}

- Residuum