Home > Web Front-end > CSS Tutorial > How to Fix Misaligned Second Lines in Unordered Lists After a CSS Reset?

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

DDD
Release: 2024-11-25 17:25:13
Original
1120 people have browsed it

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;
}
Copy after login

Improved Solution (March 2014 Update):

ul {
  list-style-position: outside;
  margin-left: 1em;
}
Copy after login
  • 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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template