css - Étirer horizontal ul pour s'adapter à la largeur de div

original title: "css - Stretch horizontal ul to fit width of div"


Translate

For the main nav of my site, there is a 980px wide div with a ul for the main nav links. I am trying to make the nav links stretch to fit the width of the div evenly.

<div style="width: 980px;">
<ul id="horizontal-style">
  <li><a href="#">Nav Item</a></li>
  <li><a href="#">Short Item</a></li>
  <li><a href="#">Really Long Nav Item</a></li>
  <li><a href="#">Nav Link</a></li>
  <li><a href="#">Another Link</a></li>
</ul>
</div>

I am doing some typical css to make the ul list horizontally (float: left, display: block). I can tweak the padding of the li to get it very close, but what I really need is a way to make it stretch to fit automatically. Possible?

Edit Difficulty 1: Can't use tables. Difficulty 2: Each nav item will be a different width to accommodate longer and shorter link names.



Pour la navigation principale de mon site, il y a une div large de 980px avec un ul pour les liens de navigation principaux. J'essaie d'étirer les liens de navigation pour qu'ils s'adaptent uniformément à la largeur de la division. <div...

Ceci est le résumé après la traduction, si vous avez besoin de voir la traduction complète, veuillez cliquer sur l'icône «traduire»


Toutes les réponses
  • Translate

    This is the easiest way to do it: http://jsfiddle.net/thirtydot/jwJBd/

    (or with table-layout: fixed for even width distribution: http://jsfiddle.net/thirtydot/jwJBd/59/)

    This won't work in IE7.

    #horizontal-style {
        display: table;
        width: 100%;
        /*table-layout: fixed;*/
    }
    #horizontal-style li {
        display: table-cell;
    }
    #horizontal-style a {
        display: block;
        border: 1px solid red;
        text-align: center;
        margin: 0 5px;
        background: #999;
    }
    

    Old answer before your edit: http://jsfiddle.net/thirtydot/DsqWr/


  • Translate

    People hate on tables for non-tabular data, but what you're asking for is exactly what tables are good at. <table width="100%">


  • Translate

    inelegant (but effective) way: use percentages

    #horizontal-style {
        width: 100%;
    }
    
    li {
        width: 20%;
    }
    

    This only works with the 5 <li> example. For more or less, modify your percentage accordingly. If you have other <li>s on your page, you can always assign these particular ones a class of "menu-li" so that only they are affected.