Why does my bulleted list look odd on the web browser?

#html #webdev #beginners #learning

When editing my recipe project, I noticed something looking rather odd.

In a center-aligned bulleted list, the bullets are far separated from the list items, all huddled towards the left.

Approach 1: Default List Format

<h2>Ingredients</h2>
    <ul>
        <li>1 large egg</li>
        <li>1 ripe avocado, pitted and peeled</li>
        <li>1 slice of bread</li>
        <li>1/4 tsp black pepper</li>
        <li>1 teaspoon lemon juice</li>
        <li>1 pinch of salt</li>
        <li>1 pinch of cayenne pepper powder</li>
    </ul>

My first thought was, is it because the browser needs to distribute each list item evenly across the page?

And at the same time, it needs to leave plenty of space between the text and each bullet point?

I later learned this happens because bullets are left-aligned by default, and the text is centered independently within a container.

I decided to play around with the formatting...

Approach 2: Removing the `ul` element

<h2>Ingredients</h2>
      <li>1 large egg</li>
      <li>1 ripe avocado, pitted and peeled</li>
      <li>1 slice of bread</li>
      <li>1/4 tsp black pepper</li>
      <li>1 teaspoon lemon juice</li>
      <li>1 pinch of salt</li>
      <li>1 pinch of cayenne pepper powder</li>

Without the ul element, the li elements are treated as regular block elements standing on their own.

But the browser will still interpret the li elements as list items, and add bullets to each item. And since there are no ul elements to apply the default styling onto the list items, the bullets are also center-aligned.

Now what happens if you take out both ul and the li elements?

Approach 3: Removing `ul` and `li` elements

<p>
   1 large egg
   <br>
   1 ripe avocado, pitted and peeled
   <br>
   1 slice of bread
   <br>
   1/4 tsp black pepper
   <br>
   1 teaspoon lemon juice
   <br>
   1 pinch of salt
   <br>
   1 pinch of cayenne pepper powder
</p>

Instead of list items, the text is structured as paragraph elements. The bullet points have disappeared, and although this type of formatting looks more bare bones, it has a cleaner appearance compared to the previous approach above.

I also added the br element to add a line break between each text item.

After trying all three approaches, I decided to go with the last one since it looks more tidy than the other two.

Next step: find out different ways to format a bulleted list, but in CSS!

Top comments (1)

GrahamTheDev • Mar 13 • Edited

There is a way to do what you originally tried:

 ul {
      list-style-position: inside; /* this is the key part that moves the bullets next to the content */
      text-align: center;
      margin: 0 auto; /* Centers the list container, can be done with flex or grid etc. as well */
    }