Question

我正在尝试使用视口的整个宽度来显示5个可以均匀分布的项目。我已经成功地让它工作了，但是当你调整浏览器窗口的大小时，最后一个框闪烁并向下推。

http://jsfiddle.net/pnUnU/

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

非常感谢，

Answer 1

Demo

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;
}

页脚项目与Viewport均匀扩展

2 个答案: