css - li列表两端对齐问题

问题描述

问 题

这个图中灰色块两端对齐，我现在用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>

*{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;
}

解决方案

ul{overflow: hidden; margin-right:-20px;}

设置li父级ul的margin-right的负值
li:nth-child(3n)可以去掉了

这篇关于css - li列表两端对齐问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！