如何总是有相同数量的固定宽度 <li> 每排单液 <ul> ？

Question

可以说我在一个流体<ul>有10个<li> <ul> 。 如果我调整浏览器的大小， <li>将进入下一行。 假设我们希望<ul>位于页面中心：

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;
}

这将使我们的<ul>居中，但是很显然，如果我们有10个<li>并且页面/屏幕大小仅设法使每行有4个<li> ，那么我们将有2个<li>位于最后一行的中心，并且不与前几行的第一个<li> 。

我不确定我要达到的目标是否只能使用css来完成（我想如果每行都是不同的<ul>那还可以，但是我只想要1个<ul> 。

所以我想知道是否可以和/或应该使用jquery来完成技巧？

Answer 1

您需要将ul放在div中并对齐该中心，然后将ul左对齐并使其内联：

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; 文字对齐：左； }

Answer 3

在宽度中使用calc函数

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

我希望这可行

Answer 4

您需要将li元素的宽度设置为10％，以使其流畅：

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%;