Footer Items Expanding with Viewport Evenly

问题

I'm trying to get a footer to display 5 items which space themselves out evenly, utilising the full width of the viewport. I've managed to get it working somewhat, but the last box flickers and gets pushed downwards when you resize the browser window bigger and smaller.

http://jsfiddle.net/pnUnU/

I was wondering if there was a better way to go about coding this? And also, is it possible to stop the buttons from expanding with the viewport once they reach a certain (small) size?

Much appreciated,

回答1:

You could use another element inside the li, having the border. That way the li could take the full 20% each.

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