Doubt about li background color

Doubt about li background color
0

#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.