CSS水平菜单：显示：内联和块？让链接覆盖整个LI？答案

【问题标题】：CSS Horizontal Menu: display: inline AND block? Make link cover whole LI?CSS水平菜单：显示：内联和块？让链接覆盖整个LI？
【发布时间】：2010-12-17 12:17:07
【问题描述】：

通常，要使链接填写整个li，我使用display: block;。但是对于水平菜单，我需要将其设置为 display:inline;所以它排成一行。我试过display:inline-block; 但这没有帮助。我见过可以实现这一点的水平菜单，但我无法从它们的来源中找到方法。

有什么想法吗？谢谢。

【问题讨论】：

你给li加宽度了吗？
您有正在使用的代码示例吗？

标签： css menu inline

【解决方案1】：

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

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

JS Fiddle demo.

【讨论】：

display: inline-block 在 ie7 和 ie6 上不起作用，所以这不是一个好的解决方案。
@Fatih: 引用PPK: "IE 6/7 accepts the value only on elements with a natural display: inline." 而a 元素是“自然地”display: inline。

【解决方案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

【讨论】：

啊，我没想到用floats。我觉得我更喜欢inline 或inline-block，但值得记住。
好的，有什么特别的原因吗？ display: inline 不允许您应用垂直填充/边距。

【解决方案3】：

应该这样做：

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

【讨论】：

【解决方案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%;}

【讨论】：