html - 无法将 UL 标签居中

Question

如何让 ul 标签居中？

我尝试了所有我知道的方法，但没有任何效果(http://jsfiddle.net/alhasen/dmW5F/)。

注意:全屏查看。

请参阅字段集中心的这个 ul 列表。

 <ul id="progressbar">
   <li class="active">First step</li>
   <li>Second step</li>
   <li>Third step</li>
 </ul>

Answer 1

不确定这是否是您想要看到的，但请看一下:http://jsfiddle.net/dmW5F/1/

反正我做的是

删除 ul {width:1000px} 结果:

    ul {
        margin: auto auto;
        text-align: center;
        position: relative;
    }

并将#progressbar li更改为:

    #progressbar li {
        list-style-type:none;
        color:#fff;
        text-transform:uppercase;
        font-size:9px;
        width:30%;
        padding-top:10px;
        display:inline-block;
        position:relative
    }

我删除了 float:left，添加了 display:inline-block，将 width 更改为 width:30%

如果有任何问题，请告诉我。干杯!