控制ul内容自适应居中

在开发过程中，想到一个问题，平时对块级元素居中的时候都是定义一个宽度然后简单的通过margin:0 auto;实现，但是如果内容增加，是不是每次都需要修改宽度呢。所以需要一个自适应内容，并居中的方案。

<div class='container'>
    <ul class="clearfix">
        <li><a href="javascript:void(0);"></a></li>
        <li><a href="javascript:void(0);"></a></li>
        <li><a href="javascript:void(0);"></a></li>
    </ul>
</div>

这是一个非常简单的结构，也便于让大家了解我们要用到的方法。

.clearfix:after{
    content:'';
    visibility:hidden;
    font-size:0;
    height:0;
    display:block;
    clear:both;
}

.container{
    width:100%;
    text-align:center;          
}
 
ul{
    display:inline-block;  
}
 
li{
     float:left;
     width:20px;
     height:20px;
     margin:0 20px;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     -o-border-radius: 10px;
     border-radius: 10px;
     cursor:pointer;
}
 
a{
    display:block;
    background-color:#000;
}

这实现思想是，先让ul定义 display:inline-block 属性，让其变成行内块级元素。

当ul成为行内块级元素后，它便有了行级元素的特性。

那么，重点来了。

只需要对ul的父级元素 .container 定义一个text-align:center;

效果便可以很明显的看到了。

更重点是，ul内的li的增减并不会对其位置造成偏移。