使用 list-style-type: none 时删除项目符号的空格

Question

这是我的代码：

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使用时如何操作？

Answer 1

您可以使用否定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>

Answer 2

使用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>