html - 如何在 UL 元素中居中列表项？

Question

如何在不使用额外的 div 或元素的情况下将 ul 中的列表项居中。我有以下内容。我认为 text-align:center 可以解决问题。我似乎无法弄清楚。

<style>
ul {
    width:100%;
    background:red;
    height:20px;
    text-align:center;
}
li {
    display:block;
    float:left;
    background:blue;
    color:white;
    margin-right:10px;
}
</style>

<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

检查 jsfiddle http://jsfiddle.net/3Ezx2/1/

Answer 1

写 display:inline-block 而不是 float:left。

li {
        display:inline-block;
        *display:inline; /*IE7*/
        *zoom:1; /*IE7*/
        background:blue;
        color:white;
        margin-right:10px;
}

http://jsfiddle.net/3Ezx2/3/