ul内容自适应居中

mt

在开发过程中，想到一个问题，平时对块级元素居中的时候都是定义一个宽度然后简单的通过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的增减并不会对其位置造成偏移。