How to Align the Second Line of a Two-Line List Item in CSS?

Li Item on Two Lines with Aligned Second Line

In an unordered list, you may encounter a long list item that spans two lines, but the second line is not aligned with the first. To resolve this misalignment, leverage the text-indent property.

The text-indent property specifies the horizontal space before the first line of text content in an element. By specifying a negative text-indent value, you can shift the first line a certain amount to the left. To counterbalance this offset, apply a positive padding-left value.

In the provided code example, the .fa-fw class has a width of 1.28571429em. To align the second line, we set the li element's text-indent to -1.28571429em and the padding-left to 1.28571429em. This cancels out the offset, resulting in a flush left second line.

ul {
  width: 300px;
}
li {
    padding-left: 1.28571429em;
    text-indent: -1.28571429em;
}

Implementing this solution ensures that the second line of the long list item aligns with the first line, creating a visually balanced unordered list.

The above is the detailed content of How to Align the Second Line of a Two-Line List Item in CSS?. For more information, please follow other related articles on the PHP Chinese website!