<li>长文本对齐

Question

嗨，我刚刚发现我首页上的列表元素存在视觉上的不一致：如果li元素内的文本长于1行，则第二行ist不再与文本的第一行对齐。

我在样式表中使用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> 

Answer 2

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

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

演示

Answer 3

刚找到与li：before图标替换相结合的解决方案：

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

这样我可以对齐第一行，因此不再发生错误。 感谢您的帮助和想法:)