CSS: Faire que tous les <li> largeur à partir d'une liste et de prendre jusqu'à 100% de l'espace disponible

Si une largeur égale entre les éléments est important pour vous, vous pouvez flotter les éléments situés à gauche et de leur donner une égale largeur (cela ne fonctionne que lorsque vous savez combien d'articles que vous avez. Alternativement, vous pouvez utiliser js pour déterminer la largeur si vous avez un nombre variable d'éléments de menu):

#DivN{
    width:100%;
    height:42px;
    border-top:1px solid black;
    border-bottom:1px solid black;
    text-decoration:none;
    background-color:black;
    text-align:center;
    font-size:13px;
    font-weight:700;
}

#DivN ul{
    list-style:none;
    width:100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#DivN ul li{
    float:left;
    line-height:37px;
    height:100%;
    list-style-type:none;
    margin:0;
    overflow:hidden;
    width: 14.28571428571429%;
    cursor: pointer;
}
#DivN ul li:hover{
    background-color: gray;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
#DivN ul:before,
#DivN ul:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

#DivN ul:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
#DivN ul {
    *zoom: 1;
}

Ici est un violon: http://jsfiddle.net/kZb9C/

Mis à jour pour faire de la cf (clearfix) cible de votre élément: http://jsfiddle.net/4LUQe/16/

Si vous souhaitez utiliser le display: table approche, n'oubliez pas d'utiliser display: table-cell sur le <li> éléments. Aussi, l'utilisation vertical-align: middle si vous voulez à la verticale du centre de eux. (Noter que table et table-cell propriétés CSS ne fonctionnent pas dans IE7 et ci-dessous).

Ici un violon avec la deuxième approche (table): http://jsfiddle.net/kZb9C/1/

<style>
   div { border:1px solid red; width:400px; height:400px; }
   ul { width:100%; height:50px; list-style: none; margin:0; padding:0; text-align: center; }
   li { background-color:green; color:White; width:1%; position:relative; display:table-cell; border:solid 1px white; }
</style>

<div>
   <ul>
      <li>CELL 1</li>
      <li>CELL 2</li>
      <li>CELL 3</li>
      <li>CELL 4</li>
   </ul>
</div>