Question

通常，要使链接填写整个li，我会使用display: block;。但是使用水平菜单，我需要将其设置为显示：inline;所以它排成一行。我试过了display:inline-block;，但这没有用。我已经看到了实现这一目标的横向菜单，但我无法从他们的来源中找到它们。

有什么想法吗？感谢。

Answer 1

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

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

JS Fiddle demo

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

Answer 3

这应该这样做：

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

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

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

4 个答案: