如何将<li>项目对齐到第二行？</li>

Question

我想使用单<ul> .... </ul>

创建一个无序列表

如何将第二条线对齐中心？

我在这里创建了JSFiddle http://jsfiddle.net/jitendravyas/JWHQQ/来测试

Answer 1

要在中心对齐<ul>元素，请将左右边距设置为auto：

ul{ text-align:center;width:450px;margin-left:auto;margin-right:auto}
li{ float:left;padding:15px}

要将<li>的两行与中心对齐，请将display: inline用作suggested by domanokz。但在这种情况下，<li>会失去边距和填充。要保留它们，请将display设置为inline-block：

ul{ text-align:center;width:450px;}
li{ display:inline-block;padding:15px;}

Answer 2

让li内联...您不必设置float:left

ul{ text-align:center;width:450px}
li{ display:inline;padding:15px}

Answer 3

这可以解决这个问题吗？

http://jsfiddle.net/JWHQQ/5/

我制作了li内联元素，而不是让它们向左浮动。

Answer 4

这似乎是最好的解决方案。

ul{ text-align:center;width:450px magin:0 auto}<br>
li{ display:inline;padding:15px}