css - Dehnen Sie die horizontale ul, um sie an die Breite von div anzupassen

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.



Für das Hauptnavigationssystem meiner Site gibt es ein 980px breites Div mit einer Ul für die Hauptnavigationslinks. Ich versuche, die Navigationsglieder so zu dehnen, dass sie gleichmäßig auf die Breite des Div passen. <div...

Dies ist die Zusammenfassung nach der Übersetzung. Wenn Sie die vollständige Übersetzung anzeigen möchten, klicken Sie auf das Symbol "Übersetzen"


Alle Antworten
  • 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.