CSS控制标签元素左右对齐

2017-09-02 NOTHING 1,210 热度 1

在做网页DIV布局的时候我们常常会遇到需要li等标签的左右对齐, 在我们不了解一些特殊的CSS的情况下我们经常会用到增大父级的宽度来实现左右对齐,但实际上你只需要懂得运用“nth-child(Xn)”参数就能简单的实现你所想要的效果:

如果在我们的DIV里面需要3排元素左右对齐中间居中:

HTML实例子

<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

CSS样式

.box{width:600px;margin: 0 auto;}

ul{overflow: hidden;}
li{
float: left;
width:280px;
height: 140px;
background: #f00;
list-style: none;
margin-right: 30px;
margin-bottom: 30px;
}
li:nth-child(3n){ /*其中数字3代表列数,比如4列就写4*/
margin-right: 0;
}

通过nth-child(Xn)参数我们可以发掘更多有趣的新玩法,比如在做移动端的时候我们只需要排列2列那么我们还可以通过它的特性直接省去margin或者padding参数

CSS我们就可以这样来写

li {
width:45% !important ;
}
li:nth-child(1n){
float:left;
}
li:nth-child(2n){
float:right;
}

这样是不是很酷,CSS的确实很奇妙,学习这些参数真的可以起到事半功倍的效果,希望你们能学会。

声明:文浩子.版权所有,如未注明违者必究,均为原创|本网站采用BY-NC-SA协议授权

转载:转载请注明原文链接 - CSS控制标签元素左右对齐