ul内容自适应居中

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

　　于是，我写了一个Demo去思索一下这个问题，并简单检验一下自己的想法。HTML代码如下：

1 <div class='container'>2     <ul class="clearfix">3         <li><a href="javascript:void(0);"></a></li>4         <li><a href="javascript:void(0);"></a></li>5         <li><a href="javascript:void(0);"></a></li>6     </ul>7 </div>

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

　　CSS代码如下:

 1 .clearfix:after{ 2     content:''; 3     visibility:hidden; 4     font-size:0; 5     height:0; 6     display:block; 7     clear:both; 8 } 9 10 .container{11     width:100%;12     text-align:center;          13 }14  15 ul{16     display:inline-block;  17 }18  19 li{20      float:left;21      width:20px;22      height:20px;23      margin:0 20px;24      -webkit-border-radius: 10px;25      -moz-border-radius: 10px;26      -o-border-radius: 10px;27      border-radius: 10px;28      cursor:pointer;29 }30  31 a{32     display:block;33     background-color:#000;34 }

 

实现的效果如图：

 

 

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

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

那么，重点来了。

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

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

 

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

或许这个技巧很普通，但是我觉得这是一个思索的过程，如果有不足，请各位指出！