u内容自适应居中

.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的增减并不会对其位置造成偏移。
或许这个技巧很普通，但是我觉得这是一个思索的过程，如果有不足，请各位指出！