如何修复自定义项目符号列表第二层的缩进，同时保持第一层的边距?HTML

Question

我想创建一个自定义项目符号列表(更改项目符号颜色(，并在不影响每一行的情况下调整行的边距(第一行为75px，第二行为第一行右侧15px(。现在，它只使第一行距离边界75px，然后使第二行距离边界150px。html:

<div class="vocab">
<p1>Vocab</p1>
<div class="list">
<ul>
<li>Word</li>
<ul>
<li>Definition</li>
</ul>
</ul>
</div>
</div>

css：

.vocab > .list ul {
list-style: none;
margin-left: 75px;
padding: 0;
color: black;
}
.vocab > .list ul li::before {
content: "2022";
padding: 10px;
color: red;
}

Answer 1

我认为您的问题是嵌套列表。每个列表都得到一个margin-left: 75px，这意味着第二个列表将缩进2*75px。

我认为最好的解决方案是重新考虑您的标记。你真的需要第二个ul元素吗？也许换一种元素会更好？例如，在li中，可以有两个跨度，一个用于单词，另一个用于词定义。

但是，如果你想保留这个标记，并从第二个ul中删除边距，也许这样的东西会对你有所帮助：

ul ul {
margin-left: 0 !important;
}

这将移除在另一个ul元素内部的任何ul元素留下的空白。由于已经在使用的选择器的特殊性，需要!important