如何在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;
}