这是我的代码:
li.title {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
<ul>
<li class="title">Title</li>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
如您所见,“标题”文本之前有一个空格,其中缺少项目符号。我需要删除这个空格,换句话说,将“标题”与列表的左侧对齐。使用
list-style-type: none
时怎么办?
使用
list-style-position:inside
li.title {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
ul {
list-style-position: inside
}
<ul>
<li class="title">Title</li>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
您可以使用否定
margin-left
:
li.title {
list-style-type: none;
margin-left: -1em;
}
<ul>
<li class="title">Title</li>
<li>one</li>
<li>two<br />linebreak here</li>
<li>three</li>
</ul>
或者,您也可以使用
transform
:
li.title {
list-style-type: none;
transform: translateX(-1em);
}
<ul>
<li class="title">Title</li>
<li>one</li>
<li>two<br />linebreak here</li>
<li>three</li>
</ul>