Question

假设我在一个流体<li>中有10个<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 {{1}在最后一行居中且未与前一行的第一个<li>对齐。

我不确定我是否只能使用css（我假设每行是一个不同的<li>，然后它就可以了，但我只想要1 {{1} }。

所以我想知道这个技巧是否可以和/或应该使用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; text-align：left; }

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

如何在单个流体中每行具有相同数量的固定宽度<li> <ul>？</ul> </li>

5 个答案: