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的增减并不会对其位置造成偏移。

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