在开发过程中,想到一个问题,平时对块级元素居中的时候都是定义一个宽度然后简单的通过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的增减并不会对其位置造成偏移。
或许这个技巧很普通,但是我觉得这是一个思索的过程,如果有不足,请各位指出!
时间: 2024-10-20 04:58:37