Li Item on Two Lines: Addressing Misalignment in the Second Line
When working with unordered lists, you may encounter a scenario where a list item wraps onto a second line, causing the second line to be offset from the first. This misalignment can disrupt the visual aesthetics of your list.
In the provided example, the following HTML code was used to create the list:
<ul> <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li> <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li> <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li> </ul>
The issue arises because the tick icon () is inline content. When the text wraps, the icon remains on the same line, leading to the misalignment of the second line.
To resolve this issue, you can utilize the text-indent property, which specifies the amount of horizontal space left before the first line of text in an element. By setting a negative text-indent value, you can shift the first line to the left, aligning it with the subsequent lines.
li {
text-indent: -1.28571429em;
}To compensate for the negative indent, you can apply a positive padding to the element:
li {
padding-left: 1.28571429em;
}By applying these styles, you can align the second line of the list item with the first, resulting in a more cohesive visual presentation.
The above is the detailed content of How to Fix Misaligned Second Lines in Multi-Line List Items?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
