<li>与长文本对齐

Question

Heyho，我刚刚在我的主页上发现了与列表元素的奇怪视觉不一致：如果li元素中的文本长于1行，则第二行不再与文本的第一行对齐。

我已经使用li：替换了正常的列表图标，使用li：之前在我的样式表中，这导致了错误。我可以很好地对齐li元素的第一行，但是如果文本比错误发生的那么长。

所以我想知道是否有这样的解决方案，而不是使用list-style-image或背景图像替换li：带图像的图标之前？也许你们中的一些人有一个想法：）

Answer 1

只需将list-style-position: outside;应用于您的li元素

即可

li {
  list-style-position: outside;
}

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam convallis vel lectus eget elementum. Sed lacinia vulputate egestas. Aenean fringilla, tortor sed tincidunt venenatis, justo enim porttitor quam, quis consequat quam erat a augue. Proin pellentesque
    condimentum ante et viverra. Quisque tristique nisl id varius varius. Donec elit magna, auctor vel nunc sed, fermentum euismod ipsum. Aenean ut nisl enim. Curabitur leo est, pharetra at magna ut, pellentesque posuere tortor. Curabitur posuere ut turpis
    non sagittis. Vestibulum sit amet libero porttitor, dapibus orci in, tincidunt felis. Pellentesque ac tempor libero, nec lacinia orci. Ut dictum augue faucibus feugiat mollis. Ut turpis justo, placerat ac congue in, co
  </li>
  <li>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam convallis vel lectus eget elementum. Sed lacinia vulputate egestas. Aenean fringilla, tortor sed tincidunt venenatis, justo enim porttitor quam, quis consequat quam erat a augue. Proin pellentesque
    condimentum ante et viverra. Quisque tristique nisl id varius varius. Donec elit magna, auctor vel nunc sed, fermentum euismod ipsum. Aenean ut nisl enim. Curabitur leo est, pharetra at magna ut, pellentesque posuere tortor. Curabitur posuere ut turpis
    non sagittis. Vestibulum sit amet libero porttitor, dapibus orci in, tincidunt felis. Pellentesque ac tempor libero, nec lacinia orci. Ut dictum augue faucibus feugiat mollis. Ut turpis justo, placerat ac congue in, co
  </li>
</ul>

Answer 2

请将以下样式添加到列表中。以下是示例。

ul li {
    list-style-position: outside; }

Demo

Answer 3

刚刚找到了与li组合的解决方案：替换图标之前：

ul li { text-indent: -1em; }

这个我可以对齐第一行，所以错误不再发生。感谢您的帮助和想法：）