gpt4 book ai didi

css - ' float :none' property between every 3 'li' using CSS

转载 作者:行者123 更新时间:2023-12-02 04:38:33 27 4
gpt4 key购买 nike

在这里,我为每个 li 标签创建了一个 ul li 列表,其中包含 float:left。并为每三个 li 添加了 float:none; 内联属性。我想仅使用 CSS 使其具有条件。

 <!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>

最佳答案

您将使用 ul li:nth-child(3n) 定位每三个 li 元素。

EXAMPLE HERE

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

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

EXAMPLE HERE

ul li:not(:nth-child(3n)) {
float:left;
}

关于css - ' float :none' property between every 3 'li' using CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21397465/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com