使用CSS,每3'li'之间的'float:none'属性

Har*_*nan 2 css css3 less css-float

在这里,我为每个标签创建了一个ul li列表.并为每三分之一添加内联属性.我想只使用CSS来使用条件.float:leftlifloat:none;li

 <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <style>
    ul
    {
        list-style:none;
    }
    ul li
    {
        margin-right:10px;
        float:left;
    }
    </style>
    </head>
    <ul>
    <li>List 1</li>
    <li>List 2</li>
    <li style="float:none;">List 3</li>

    <li>List 4</li>
    <li>List 5</li>
    <li style="float:none;">List 6</li>

    <li>List 7</li>
    <li>List 8</li>
    <li style="float:none;">List 9</li>

    <li>List 10</li>
    <li>List 11</li>
    <li style="float:none;">List 12</li>

    <li>List 13</li>
    <li>List 14</li>
    </ul>
    <body>
    </body>
    </html>
Run Code Online (Sandbox Code Playgroud)

Jos*_*ier 5

您将使用ul li:nth-child(3n)目标每个第三个li元素.

这里的例子

ul li {
    margin-right:10px;
    float:left;
}
ul li:nth-child(3n) {
    float:none;
}
Run Code Online (Sandbox Code Playgroud)

如果你想得到花哨,你可以用来从初始样式中:not()排除第三个li元素,避免不得不覆盖float:left.

这里的例子

ul li:not(:nth-child(3n)) {
    float:left;
}
Run Code Online (Sandbox Code Playgroud)