CSS3 DIV自适应宽度、水平居中的实现方法

来源：互联网发布：中国是否允许持枪知乎编辑：程序博客网时间：2024/05/16 23:40

1.text-align:center和display:inline-block相结合,这个技巧需要一个父元素。

<style type="text/css">.clearfix:after, .clearfix:before{display:table;content:" ";}.clearfix:after {clear:both;content:"";display:block;height:0;visibility:visible;}.parent{text-align:center;}.child{display:inline-block;}.child{*display:inline;*zoom:1;}/*IE系列IE8+支持，要IE7 IE6 支持需要加入以下代码使display:inline像display:inline-block一样 */.item{float:left;}.item:not(:last-child){margin-right:10px;}</style><div class="parent"><ul class="child clearfix"><li class="item">第一项</li><li class="item">第二项</li><li class="item">第三项</li></ul></div>

2.position:relative与float相结合.
这个技巧需要两个父元素，一个用来定位而另外一个用来避免出现滚动条。

<style type="text/css">.clearfix:after, .clearfix:before{display:table;content:" ";}.clearfix:after {clear:both;content:"";display:block;height:0;visibility:visible;}.box{overflow:hidden;}.parent{position:relative;left:50%;float:left;}.child{position:relative;left:-50%;float:left;}.item{float:left;}.item:not(:last-child){margin-right:10px;}</style><div class="box"><div class="parent"><ul class="child"><li class="item">第一项</li><li class="item">第二项</li><li class="item">第三项</li></ul></div></div>

阅读全文

0 0