如何将列表项置于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/

Answer 2

li{
    display:table;
    margin:0px auto 0px auto;
}

这应该工作.

Answer 3

更现代的方法是使用flexbox:

ul{
  list-style-type:none;
  display:flex;
  justify-content: center;

}
ul li{
  display: list-item;
  background: black;
  padding: 5px 10px;
  color:white;
  margin: 0 3px;
}
div{
  background: wheat;
}

<div>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>  

</div>

Answer 4

看起来你需要的是text-align: center;在ul