html - Box-made navigation bar adapting to screen width? -

i'm trying create navigation bar composed blocks using code :

<nav id="mainnav">     <ul>         <li><a href="#">link</a></li>         <li><a href="#">link</a></li>         <li><a href="#">link</a></li>         <li><a href="#">link</a></li>         <li><a href="#">link</a></li>         <li><a href="#">link</a></li>         <li><a href="#">link</a></li>         <li><a href="#">link</a></li>         <li><a href="#">link</a></li>         <li><a href="#">link</a></li>     </ul> </nav> 

and css

#mainnav {     padding: 0px; }  #mainnav li {     display:inline-block; }  #mainnav {     /* box */     display: block;     padding: 3px;     width: 208px;     margin: 2px;     border: 1px solid rgb(85,85,85);     /* text */     text-align: center; } 

(see fiddle : here)

for now, have boxes going in lines many boxes per line possible, that's looked for.

but, either insert auto-margin act kind of justified text (and use whole horizontal space), or have boxes stretch horizontally fill space.

i tried margin: 2px auto;, nothing want. tried min-width properties, , doesn't work either. , several other things.

now i'm running out of ideas , google isn't helping me.
how can achieve ?

i believe can't fix without jquery (or javascript).

i made this, hope helps you:

html

<ul id="nav">     <li><a href="#">home</a></li>     <li><a href="#">products</a></li>     <li><a href="#">contact</a></li> </ul> 

css

#nav {     list-style: none;     margin: 0;     padding: 10px;     background: red;     width: 400px; } #nav li {     display: inline-block;     background: green;     margin: 0; /* must 0 on left , right */     padding: 0; /* must 0 on left , right */     margin-right: -4px; /* delete default inline-block margin */ } #nav li {     display: block;     padding: 5px 0; /* padding-left , right must 0 */     margin: 5px;     background: yellow; } 

jquery

$(document).ready( function() {     var ulwidth = $("#nav").width();      var atotalwidth = 0;     var numa = 0;      $("#nav li a").each( function() {         var awidth = $(this).width()              + parseint($(this).css("margin-left"))              + parseint($(this).css("margin-right"))             + parseint($(this).css("borderleftwidth"))              + parseint($(this).css("borderrightwidth"));         atotalwidth += awidth;         numa += 1;     });      var spacebetween = ulwidth - atotalwidth;     var apadding = math.floor( spacebetween / (numa * 2 ) );      $("#nav li a").each( function() {             $(this).css('padding-left', apadding);         $(this).css('padding-right', apadding);     }); }); 

working demo