How to make Foundation 5 top-bar (Navbar) items use all available space

Question

Here is a codepen of my current navigation bar: DEMO

You can see the items don't spread out to take up all the given space. The problem is if you make them evenly spaced they no longer all fit on the bar and end up on a second line (run the js on the codepen to see).

I'm looking for one of two fixes:

1) Make the empty space spread out to pad them evenly across the bar without going to a second line.

2) Make two lines of text fit in the bar with all text centered vertically.

Although if you can come up with another that works in Chrome, Firefox, and IE9+ I'll take that too.

The thing to keep in mind is the number of items in the bar may change.

Answer 1

To get them evenly spaced you can set the list to display as a table and the items as cells. This will achieve what you're after.

The CSS:

#nav {
  width: 100%;
  display: table !important;
}
#nav li {
  display: table-cell;
  text-align: center;
  float:none;
  height: 100%;
} 
#nav li a {
    padding-left: 0;
    padding-right: 0;
}

It's worth noting this is a CSS question and not specific to Foundation or its Topbar feature.

UPDATED

IE needs the padding removed from the link otherwise it wraps the longer menu items. Firefox needs the 100% height on the LI to fix the height issue.