Question

这是一些HTML。

<div id = "header">
  <div id = "menu">
    <ul>
      <li><a href = "#">Home</a></li>
      <li><a href = "#">Browse</a></li>
      <li><a href = "#">Account</a></li>
      <li><a href = "#">About</a></li>
    </ul>
</div>

而且，这里有一些CSS

#menu
{
  width: 80%;
  height: 30px;
}

#menu li a
{
 display: block;
 background-color: #999999;
 color: #FFFFFF;
 font-weight: bold;
 line-height: 30px; 
 text-align: center;   
}

上面的HTML和CSS给出了4个矩形。我希望在菜单div 内对这些矩形进行水平均匀拉伸。

每次尝试时，我都会在关于矩形（即最后一个矩形）之后获得自由空间，或者将关于框的流程转到下一行。

感谢您的帮助

Answer 1

您需要添加：

#menu li a
{  
 float:left;
 width:25%;
}

#menu li
{
 display:inline;   
}

演示：http://jsfiddle.net/BPyUB/

如何在div内水平拉伸内容，使其占据所有空间？

1 个答案: