1

我的 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>

我的 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;
}

这看起来很完美，除非它没有完全延伸到页面上其余对象的全宽。容器有：

margin:0 50px 0 50px;

页面上的所有其他容器也是如此。唯一不拉伸整个宽度的是导航栏。如果可能的话，我不想使用表格或 jscript。建议？

4

3 回答 3

2 
#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;
}

display将属性分别更改为inline-block和block，并设置width为您想要的任何内容。

于 2012-06-14T04:32:50.260 回答
2 
#main_navigation ul 
    {display:table;
    width:100%;}
#main_navigation ul li {
    list-style-type: none;
    display: table-cell;

}
于 2016-03-18T10:14:02.203 回答
1

基本上，你只需要在元素上应用display: block,float: left和，让它们伸展元素的整个宽度，这已经是包含 100% 的宽度了。width: 33.3%<li><ul><div>

在这个演示中看看它是如何工作的。

代码如下：

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

请注意，您的 HTML 代码中的链接存在错误，

它应该是：

 <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>
于 2012-06-14T04:33:14.087 回答