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)
您将使用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)