Why Are My List Items Shifting After a CSS Reset, and How Can I Fix the Alignment?

List Items Shifting After CSS Reset: Aligning Second Lines with Bullets

After employing a CSS reset, several users have encountered an issue where the second lines of text within list items (li) begin below the bullet after a wrap. This visual misalignment can be corrected by adjusting the list-style-position property of the li tag, setting it to "outside."

However, this solution can lead to indentation issues with the bullets. To address this, an additional margin property can be applied to the ul parent element, ensuring alignment with the text outside the list.

Updated Solution (March 15, 2014):

ul {
  list-style-position: outside;
  margin-left: 1em;
}

This code provides a more refined solution, addressing the aforementioned indentation issue and improving readability. The margin property is applied to the ul element, ensuring that the entire list is indented, maintaining proper alignment with the text outside of the list.

The above is the detailed content of Why Are My List Items Shifting After a CSS Reset, and How Can I Fix the Alignment?. For more information, please follow other related articles on the PHP Chinese website!