html - 如何在 div 内水平拉伸(stretch)内容，使其均匀占据所有空间？

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 个矩形。我想让这些矩形在 menu div 内水平均匀拉伸(stretch)。

每次尝试时，我要么在关于矩形(即最后一个矩形)之后获得可用空间，要么让关于框流到下一行。

感谢帮助

Answer 1

你需要添加:

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

#menu li
{
 display:inline;   
}

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