li列表两端对齐问题

  2021-03-09    阅读:17
这个图中灰色块两端对齐,我现在用nth-child(3n)设置margin-right:0可以对齐
 
 
代码:
 
 
<div class="banner"></div>
<div class="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
 
 
CSS
 
 
*{margin: 0;padding: 0;}
.banner{width:1000px;height: 200px;background: #f00;margin: 0 auto;}
.box{width:1000px;margin: 0 auto;}
 
ul{overflow: hidden;}
li{
    float: left;
    width:320px;
    height: 200px;
    background: #ccc;
    list-style: none;
    margin-right: 20px;
    margin-bottom: 20px;
}
li:nth-child(3n){
    margin-right: 0;
}

免责声明:
本站部份内容系网友自发上传与转载,不代表本网赞同其观点;
如涉及内容、版权等问题,请在30日内联系,我们将在第一时间删除内容!

相关Destoon技术

(c)2012-2021 www.destoon.info All Rights Reserved
慧一科技工作室   
  QQ咨询

购买模板 售前咨询

  咨询QQ

3292628658
(早8:30-晚10:00)

  微信咨询

咨询微信
客服微信

  返回顶部