<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; }

這樣我可以對齊第一行，因此不再發生錯誤。 感謝您的幫助和想法:)