0

可以说我<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 个<li>居中在最后一行，而不是与<li>前一行的第一行对齐。

我不确定我想要实现的目标是否只能使用 css 来完成（我认为如果每一行都不同<ul>，那没关系，但我只想要 1 <ul>。

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

4

5 回答 5

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;
}
于 2013-02-27T11:51:55.050 回答
0

您需要使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/

于 2013-02-27T11:42:59.843 回答
0 
ul {
 text-align: center;
 display:table;
 width: 400px; //example
}

li { display: inline-block; 文本对齐：左；}

于 2013-02-27T11:40:20.570 回答
0

在宽度上使用 calc 函数

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

我希望这行得通

于 2013-02-27T11:40:46.350 回答
-1

Simply make the width 10% and they will resize on their own

width: 10%;
于 2013-02-27T11:37:42.200 回答