javascript - 随视口均匀扩展的页脚项目

Question

我试图让页脚显示 5 个项目，这些项目利用视口的整个宽度均匀分布。我已经设法让它工作了一些，但是当您将浏览器窗口的大小调整得越来越小时，最后一个框会闪烁并被向下推。

http://jsfiddle.net/pnUnU/

我想知道是否有更好的方法来进行编码？而且，一旦按钮达到某个（小）尺寸，是否可以阻止按钮随视口展开？

非常感激，

Answer 1

演示

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

Answer 2

您可以在 li 中使用另一个具有边框的元素。这样，李就可以每人拿走全部 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;
}
​