[英]How to make an inline <ul> stretch full width of container
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.
如果可能的话,我不想使用表格或jscript。 Suggestions?
建议?
#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 display
attribute to inline-block
and block
respectively, and set width
to whatever you want. 将
display
属性分别更改为inline-block
和block
,并将width
设置为您想要的任何值。
Basically, you just have to apply display: block
, float: left
and 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>
. 基本上,你只需在
<li>
元素上应用display: block
, float: left
和width: 33.3%
,使它们伸展出<ul>
元素的整个宽度,该元素已经是包含<div>
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>
#main_navigation ul
{display:table;
width:100%;}
#main_navigation ul li {
list-style-type: none;
display: table-cell;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.