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

Solution 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:

<footerclass="footer"><ul><li><spanclass="content">
               Option 1
            </span></li><li><spanclass="content">
               Option 2
            </span></li><li><spanclass="content">
               Option 3
            </span></li><li><spanclass="content">
               Option 4
            </span></li><li><spanclass="content">
               Option 5
            </span></li></ul></footer><!-- end footer -->​

CSS:

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

.footerlispan{
  display: block;
  border-right: 1px solid #fff;
}

.footerli:last-childspan
{
    border: none;
}
​

Solution 2:

Demo

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