css - विभाजन की चौड़ाई फिट करने के लिए क्षैतिज क्षैतिज खिंचाव

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.



मेरी साइट के मुख्य नौसेना के लिए, मुख्य एनएवी लिंक के लिए एक ul के साथ 980px चौड़ी div है। मैं समान रूप से div की चौड़ाई को फिट करने के लिए नौसेना लिंक को खिंचाव बनाने की कोशिश कर रहा हूं। <div...

यह अनुवाद के बाद का सारांश है, अगर आपको पूरा अनुवाद देखने की आवश्यकता है, तो कृपया 'अनुवाद' आइकन पर क्लिक करें


सभी उत्तर
  • 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.