CSS 水平菜单：显示：内联 AND 块？让链接覆盖整个 LI？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4470359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Horizontal Menu: display: inline AND block? Make link cover whole LI?
提问by MrBubbles
Normally, to make the link fill out the whole li, I use display: block;. But with a horizontal menu, I need to set it to display:inline; so it goes in one line. I've tried display:inline-block;but that doesn't help. I've seen horizontal menus that accomplish this, but I can't find out how from their source.
通常，为了使链接填写完整li，我使用display: block;. 但是对于水平菜单，我需要将其设置为 display:inline; 所以它在一行中。我试过了，display:inline-block;但这没有帮助。我见过实现此目的的水平菜单，但我无法从它们的来源中找到方法。
Any ideas? Thanks.
有任何想法吗？谢谢。
回答by David says reinstate Monica
Apply heightand widthto the parent lielements, and then:
应用height和width到父li元素，然后：
a {
display: inline-block;
height: 100%;
width: 100%;
}
回答by Finbarr
ul {
width: 100%;
overflow: hidden;
}
li {
float: left;
list-style: none;
}
li a {
float: left;
padding: 5px;
background: red;
color: white;
}
回答by Nathan MacInnes
This should do it:
这应该这样做：
ul.menu>li {
display: inline-block;
width: 40px;
border: 1px black solid;
}
ul.menu>li>a {
display: block;
}
回答by Residuum
Is that your setup:
那是你的设置：
<ul id="nav">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
</ul>
Your link will not fill out the <li>, but the <li>will still be a block element. Make the <li>display: inline:
您的链接不会填写<li>，但<li>仍将是块元素。使<li>display: inline：
ul#nav li {display: inline;}
Or float the li and give it a width:
或者浮动 li 并给它一个宽度：
ul#nav {overflow: hidden;}
ul#nav li {float: left; width: 50%;}
