Why are My List Items\' Second Lines Indenting Under the Bullet Instead of Beside It?

Second Line in List Item Indents After Bullet

In this question, a user encounters difficulty aligning the text in their list after applying a CSS reset. Specifically, the second line of text in each list item begins under the bullet, instead of being indented alongside it.

The issue arises due to the list-style-position property of the li tag. By default, this property is set to "inside," which causes the text to wrap around the bullet. To align the text correctly, we need to set list-style-position to "outside."

However, this creates a new problem: the bullets are now outside the list container. To address this, we can apply a margin-left indentation to the list to align the bullets with the text outside the list.

Here's the CSS solution:

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

This code sets the list-style position to "outside" to align the text along with the bullet and applies an indentation to the list to align it with the other text on the page.

The above is the detailed content of Why are My List Items\' Second Lines Indenting Under the Bullet Instead of Beside It?. For more information, please follow other related articles on the PHP Chinese website!