Question

我的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。建议？

Answer 1

#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设置为您想要的任何内容。

Answer 2

基本上，您只需在display: block元素上应用float: left，width: 33.3%和<li>，以使它们延伸<ul>元素的整个宽度，已经是包含<div>的100％。

在此demo中了解它的工作原理。

代码如下：

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

Answer 3

#main_navigation ul 
    {display:table;
    width:100%;}
#main_navigation ul li {
    list-style-type: none;
    display: table-cell;

}

如何使内联<ul>拉伸容器的全宽</ul>

3 个答案: