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

Posted 2023-02-25

【中文标题】CSS水平菜单：显示：内联和块？让链接覆盖整个LI？

【英文标题】：CSS Horizontal Menu: display: inline AND block? Make link cover whole LI?

【发布时间】：2010-12-17 12:17:07

【问题描述】：

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

有什么想法吗？谢谢。

【问题讨论】：

你给li加宽度了吗？

您有正在使用的代码示例吗？

【参考方案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%;