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