css - CSS: Limit indentation on nested
问题描述
I have a nested <ul>
list that is rendered like this:
- 1
- 1.1
- 1.1.1
- 1.1.1.1
- 1.1.1.1.1
- 1.1.1.1.2
- 1.1.1.2
- 1.1.1.3
- 1.1.2
- 1.2
I'd like to limit with CSS the maximum depth of how the list is rendered (not the maximum level of list nesting. The html should remain exactly the same) to, say, 3 levels, so the list is rendered like this:
- 1
- 1.1
- 1.1.1
- 1.1.1.1
- 1.1.1.1.1
- 1.1.1.1.2
- 1.1.1.2
- 1.1.1.3
- 1.1.2
- 1.2
Can it be done with just CSS?
解决方案
You can target the nested lists starting from a particular depth:
ul > li > ul > li ul {
margin: 0;
padding: 0;
}
<ul>
<li>aaaa</li>
<li>aaaa</li>
<li>
<ul>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>
<ul>
<li>aaaa</li>
<li>
<ul>
<li>aaaa</li>
<li>aaaa</li>
</ul>
</li>
<li>aaaa</li>
<li>
<ul>
<li>aaaa</li>
<li>
<ul>
<li>aaaa</li>
<li>aaaa</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>aaaa</li>
</ul>
Or like this:
ul > li > ul > li > ul > li ul {
margin: 0;
padding: 0;
}
<ul>
<li>aaaa</li>
<li>aaaa</li>
<li>
<ul>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>
<ul>
<li>aaaa</li>
<li>
<ul>
<li>aaaa</li>
<li>aaaa</li>
</ul>
</li>
<li>aaaa</li>
<li>
<ul>
<li>aaaa</li>
<li>
<ul>
<li>aaaa</li>
<li>aaaa</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>aaaa</li>
</ul>
推荐阅读
- php - 向 laravel 的基本身份验证系统添加另一个输入字段
- cmake - 缺少 Vala 包 Valaconfig.cmake
- appium - 如何在 Appium 和 WDIO 测试中进行 API 调用?
- mysql - 带有条件的 SUM 子查询取决于父查询列返回 NULL
- node.js - express-flash-messages 在 promise 函数中不起作用
- git - Overleaf 与 git 不同步
- python - 如何匹配来自不同数据框且长度不同的两列?
- python - 如何将列表项附加到数据框中的特定列?
- python - 如何使用直方图从 kde plot seaborn 添加颜色条
- css - Chrome 上的混合混合模式转换错误