javascript - 如何在单个流体 中每行始终具有相同数量的固定宽度 ？

Question

假设我有 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 左对齐并使其成为内联 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;
}