Html 如何使内联 <ul> 拉伸容器的全宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11026395/
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
How to make an inline <ul> stretch full width of container
提问by Brandon Dorris
My HTML
我的 HTML
<div id="main_navigation">
<ul><li><a href="/One">One</li></a><li><a href="/Two">Two</li></a><li><a href="/three">Three</li></a>
</ul>
</div>
My CSS
我的 CSS
#main_navigation ul {
margin: 10px 0 15px 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#main_navigation ul li {
display: inline;
font-size:24px;
}
#main_navigation ul li a {
text-decoration: none;
padding: .2em 1em;
color: #cbc19e;
background-color: #322918;
}
#main_navigation ul li a:hover {
color: #322918;
background-color: #cbc19e;
}
This looks perfect EXCEPT it does not quite stretch out to the full width of the rest of the objects on the page. The container has:
这看起来很完美，除了它没有完全伸展到页面上其余对象的整个宽度。容器有：
margin:0 50px 0 50px;
as do all of the other containers on the page. The only one that does not stretch the full width is the nav bar. I would not like to use tables or jscript if possible. Suggestions?
页面上的所有其他容器也是如此。唯一不拉伸整个宽度的是导航栏。如果可能，我不想使用表格或 jscript。建议？
回答by Jia
#main_navigation ul li {
display: inline-block;
font-size:24px;
}
#main_navigation ul li a {
text-decoration: none;
padding: .2em 1em;
color: #cbc19e;
background-color: #322918;
width: 200px;
display: block;
}
Change the displayattribute to inline-blockand blockrespectively, and set widthto whatever you want.
分别将display属性更改为inline-block和block，并设置width为您想要的任何内容。
回答by Question Overflow
Basically, you just have to apply display: block, float: leftand width: 33.3%on <li>elements to make them stretch out the full width of the <ul>element, which is already at 100% of the containing <div>.
基本上，您只需要在元素上应用display: block,float: left和使它们伸展width: 33.3%到<li>元素的整个宽度<ul>，这已经是包含 100% 的宽度<div>。
See how it works in this demo.
在这个演示中了解它是如何工作的。
The code is as follows:
代码如下：
#container {
margin:0 50px 0 50px;
}
#main_navigation ul {
margin: 10px 0 15px 0;
padding: 0;
list-style-type: none;
text-align: center;
background: cyan;
overflow: hidden;
}
#main_navigation ul li {
margin: 0;
padding: 0;
display: block;
font-size:24px;
width: 33.3%;
float: left;
}
#main_navigation ul li a {
text-decoration: none;
padding: .2em 1em;
color: #cbc19e;
background-color: #322918;
}
#main_navigation ul li a:hover {
color: #322918;
background-color: #cbc19e;
}
Note that there are mistakes in the links within your HTML code,
请注意，您的 HTML 代码中的链接存在错误，
It should be:
它应该是：
<div id="main_navigation">
<ul>
<li><a href="/One">One</a></li>
<li><a href="/Two">Two</a></li>
<li><a href="/three">Three</a></li>
</ul>
</div>
回答by Sharavnan Kv
#main_navigation ul
{display:table;
width:100%;}
#main_navigation ul li {
list-style-type: none;
display: table-cell;
}
