how to always have same number of fixed width <li> per row in a single fluid <ul>?

Question

Lets say I have 10 <li> in a single fluid <ul> . If I resize the browser the <li> will go next row. Lets also say we want the <ul> centered on the page:

Html:

<ul>
   <li>Lorem</li>
   <li>Lorem</li>
   <li>Lorem</li>
   <li>Lorem</li>
   <li>Lorem</li>
   <li>Lorem</li>
   <li>Lorem</li>
   <li>Lorem</li>
   <li>Lorem</li>
   <li>Lorem</li>
</ul>

Css:

ul {
   text-align: center;
}

li {
    display: inline-block;
    text-align: left;
}

That will center our <ul> but obviously if we have 10 <li> and the page/screen size only manages to have 4 <li> per row, then we will have 2 <li> centered in the last row and not aligned to the first <li> of the previous rows.

I am not sure if what I am trying to achive can be done only using css ( I presume if each rows was a different <ul> then it'd be ok, but I only want 1 <ul> .

So I wonder if the trick can and/or should be done using jquery?

Answer 1

You need to put your ul in containing div and align that center and then align your ul left and make it inline-block:

http://jsfiddle.net/pdfbG/

html

<div>
    <ul>
       <li>Test</li>
       <li>Lorem</li>
       <li>Another one</li>
       <li>Lorem</li>
       <li>Lorem</li>
       <li>Lorem</li>
       <li>Lorem</li>
       <li>Lorem</li>
       <li>Lorem</li>
       <li>Lorem</li>
    </ul>
</div>

css

div {text-align:center;}
ul {
    margin:0;
    list-style:none;
    display: inline-block;
    text-align:left;
}

li {
    display: inline-block;
    text-align: left;
}

Answer 2

ul {
 text-align: center;
 display:table;
 width: 400px; //example
}

li { display: inline-block; text-align: left; }

Answer 3

use calc function in width

width:calc(100%-your margins in px or %);

this works i hope

Answer 4

You need to make 10% width of your li elements to make them fluid:

li {
    display: inline-block;
    text-align: left;
    border: 1px #AAA solid;
    width: 10%;
    font-size: 14px;
    box-sizing: border-box;
    vertical-align: top;
}

http://jsfiddle.net/CdWaY/

Answer 5

只需将宽度设置为10％，它们就会自行调整大小

width: 10%;