How to Align Two-Line List Items with Misaligned Second Lines?

Li item on two lines. Second line has no margin

When dealing with a list item that spans two lines, such that the second line is not aligned with the first, it becomes necessary to implement alignment. This situation occurs primarily because inline elements within a list allow the subsequent text to flow without affecting its alignment.

To address this issue, it is possible to exploit the 'text-indent' property. This property controls the spacing before the start of the text's first line within an element. By applying a negative 'text-indent' value, the first line can be shifted a specific amount to the left. This displacement can then be offset with a positive 'padding-left' value, resulting in the desired alignment.

Consider this example:

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

In this example, the '1.28571429em' value corresponds to the width of the 'font-awesome' icon element responsible for the checkmark. Employing this technique allows the text to align beneath the icon on both lines, correcting the misalignment.

The above is the detailed content of How to Align Two-Line List Items with Misaligned Second Lines?. For more information, please follow other related articles on the PHP Chinese website!