Doubt about li background color

1

Why li elements needs to be inline to have background color?
I mean if you write something like this:

li{
display: block;
background-color: white;
}

then the li element wont have a background color… But instead if you write

li{
display: inline;
background-color: white;
}

it works
I can’t understand why…

2

It works fine for me:

3

My guess is that either the li or its parent has a width of 0. If either has a width of 0, the text would still show but the background won’t. Display: inline takes up as much width as it has content, so it wouldn’t have that issue.

4

Like this https://codepen.io/JScars/pen/MrYPBe

5

The padding-right rule is too big and it squishes the ul, which in turn squishes any li with display: block. Since .menu-show’s parent is the body, 10% is interpreted as 10% of the entire page width.

2 Likes