How to Fix Misaligned Second Lines in Unordered Lists After a CSS Reset?

Resolving Second Line Alignment in ul Lists after CSS Reset

After applying CSS reset, you may encounter an issue where the second line of text in list items starts under the bullet. This misalignment can be resolved through CSS by adjusting the list-style-position property.

Solution:

The list-style-position property determines whether bullets appear inside or outside the list. By default, it's set to "inside," causing text to wrap around the bullets. Changing it to "outside" forces the text to align with the rest of the list.

However, this can lead to misalignment between bullets and text outside the list. To address this, apply a margin to the list items:

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

Improved Solution (March 2014 Update):

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

• This solution applies all properties to the ul element.
• em units are used for indentation, ensuring consistent cross-platform spacing.
• Clear and concise comments explain the purpose of each property.

The above is the detailed content of How to Fix Misaligned Second Lines in Unordered Lists After a CSS Reset?. For more information, please follow other related articles on the PHP Chinese website!