页脚项目均匀地扩大视口(Footer Items Expanding with Viewport E

我试图让一个脚注来显示5个项目，其空间自己出均匀，利用视口的整个宽度。 我已经成功地得到它有点工作，但最后一个方框闪烁，当调整浏览器窗口更大和更小的被向下推。

http://jsfiddle.net/pnUnU/

我在想，如果有一个更好的方式去编码呢？ 而且，是有可能从与视口停止扩张的按钮，一旦他们达到一定的（小）的大小？

非常感激，

Answer 1:

你可以使用另一种元素里内，有边界。 这样，李可采取每满20％。

http://jsfiddle.net/pnUnU/2/

HTML：

<footer class="footer">

    <ul>
        <li>
            <span class="content">
               Option 1
            </span>
        </li>
        <li>
            <span class="content">
               Option 2
            </span>
        </li>
        <li>
          <span class="content">
               Option 3
            </span>        
        </li>
        <li>
          <span class="content">
               Option 4
            </span>
        </li>
        <li>
          <span class="content">
               Option 5
            </span>
        </li>
    </ul>

</footer> <!-- end footer -->​

CSS：

.footer li
{
    float: left;
    line-height: 43px;
    text-align: center;
    color: white;
    width: 20%;
    background: grey;
}

.footer li span{
  display: block;
  border-right: 1px solid #fff;
}

.footer li:last-child span
{
    border: none;
}
​

Answer 2:

演示

http://jsfiddle.net/pnUnU/1/

文章来源: Footer Items Expanding with Viewport Evenly