html - 与长文本对齐

Question

嘿嘿，我刚刚在我的主页上发现一个奇怪的列表元素视觉不一致:如果 li 元素内的文本超过 1 行，则第二行不再与文本的第一行对齐。

我通过在我的样式表中使用 li:before 将普通列表图标替换为自制图标，这是导致错误的原因。我可以很好地对齐 li 元素的第一行，但是如果文本长于错误就会发生。

所以我想知道是否有解决方案，无需使用列表样式图像或背景图像将 li:before 图标替换为图像？也许你们中的一些人有想法:)

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>