title: css make inline-block elements span the whole width of container
body: <p>OK so this is actually a little complicated.</p>
  
  <p>I have a navigation list where the list items are set to <code>inline-block</code>. <strong>The number of items is the list is dynamic</strong> so may vary.</p>
  
  <p>My aim is to have the list items span the whole width of the container. (e.g. if there were 4 list items each one would take up 25% of the container width [ignoring margin/padding etc])</p>
  
  <p>There is the added complication that browsers seem to add a 4px margin to inline-block elements where there is whitespace between them (linebreak/space etc).</p>
  
  <p>I have made a fiddle as a starting point which has 2 examples: the first is just the list items in inline-block mode which the 2nd justifies them accross the width.</p>
  
  <p>Neither achieves what I want which is for the whole width to be taken up by the elements without them breaking onto another line.</p>
  
  <p><a href="http://jsfiddle.net/4K4cU/2/" rel="noreferrer">http://jsfiddle.net/4K4cU/2/</a></p>
  
  <p>edit: slightly separate but why in my 2nd example is there a space beneath the <code>li</code>s, dispite the fact I have set line-height and font-size to 0?</p>