鍍金池/ 問答/HTML/ li標(biāo)簽外邊距問題？

li標(biāo)簽外邊距問題？

<ul>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
    <li><img src="1.jpg" /></li>
</ul>

如上面代碼所示，我需要用列表做3列布局，第一列左邊是靠到最邊沿的，第二列和第三列分別有個margin-left:10px;的邊距，但是我不知道怎么用選擇器匹配到第二列第三列？？？

我嘗試使用nth-child(2n)和nth-child(3n)發(fā)現(xiàn)還是不對，這樣的話，第二行第一列的左邊又會有邊距了，怎么破？

效果大概是下圖這樣的

clipboard.png

回答
編輯回答
逗婦乳

3n+2 3n+3。
不太考慮兼容的話，可以用flex做。

display: flex; // 有兼容問題
flex-wrap: wrap; // 有更嚴(yán)重的兼容問題
justify-content: space-between
2017年11月19日 18:00
編輯回答
櫻花霓

li{

float: left;

}
li+li{

margin-left:10px;

}
.only{

margin-left: 0;

}

簡單點不好嗎?先兄弟元素讓每個兄弟有個margin值,再給第二行第一個li加個類設(shè)置margin為0;

2017年1月27日 23:55
編輯回答
不二心

可以使用 負數(shù)的margin-left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        ul{
            border: 1px solid #000;
            width: 660px;
            overflow: hidden;
            margin-left: -20px;
        }
        li{
            width: 200px;
            height: 50px;
            float: left;
            margin-left: 20px;
            margin-bottom: 20px;
            background: aqua;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>
2017年12月14日 01:48