Question about unordered lists and block display

I am on step 45 of “Learn Accessibility by Building a Quiz”. I have received the following prompt:

"Back to styling the page. Select the list elements within the navigation bar, and give them the following styles:

color: #dfdfe2;
margin: 0 0.2rem;
padding: 0.2rem;
display: block;"

Here is the relevant html (brackets modified to parenthesis so it will actually show up in the post):

(li)(a href=“#student-info”)INFO(/a)(/li)
(li)(a href=“#html-questions”)HTML(/a)(/li)
(li)(a href=“#css-questions”)CSS(/a)(/li)

Here is the CSS I entered:

nav li {
color: #dfdfe2;
margin: 0 0.2rem;
padding: 0.2rem;
display: block;

When I ran the code, I was told that my code passed. However, I’m confused about something: The list elements still appear to be on the same line despite having set the display to block. Why didn’t setting the display to block make all the list items go on a separate line? What did setting the display to block do in this circumstance? When I added the color #dfdfe2, I could see a small dot next to the text of each list item which I was told was the list marker. When I set the display to block, the list markers disappeared.

I asked an AI chatbot about it and got nowhere. I was told that setting display:block “doesn’t mean that each list item will automatically stack vertically. The default behavior of list items is to display inline (i.e., on the same line), even when they are block-level elements.” Okay, that explains why the list items didn’t stack vertically but not why the list markers disappeared.

To explain the disappearance of the list item markers, it told me “When you set display: block;, the list items expanded to take up the full width, but the list markers remained in their default position (usually before the text). Since the list items now occupy the entire width, the list markers are pushed outside the visible area. As a result, you don’t see the tiny dots (list markers) anymore because they are off-screen.”

But that doesn’t make any sense, because my list markers didn’t expand to take up the full width, and the list markers still disappeared anyway.

My code passed and there isn’t anything wrong with how it’s displaying, but I want to understand why it’s behaving like this. Because it has me very confused.

I was also told that due to being in a ul container, the li elements are already block elements (but still behave like inline elements?). But I don’t know if that’s correct, because then what would be the point of setting the display to block if it already is.

If anyone could explain why it’s behaving this way it would be very appreciated.

I will attach screenshots of what the navigation bar looks like before and after I add the block display setting (nav bar is towards the top right of the page)

Question 1: Why the list items appear on the same line?

They appear on the same line not because they are set display: block, but because their parent element (ul) is a flexbox :

nav > ul {
  display: flex;

On Step 45, if you reset the code, or comment out display: block on list items, you can see they are already on the same line.
If you comment out display: flex on ul element (line 34), you can see they are stacked vertically.

The reason why their parent is a flexbox makes them appeared on the same line because the default direction for flexbox is:

flex-direction: row;

which makes its children appear horizontally next to each others.
If you change it to:

flex-direction: column;

the list items will be stacked vertically.

You can read more about flexbox at:

Question 2: Why display: block make list markers disappear?

The default display value for list items is:

display: list-item;

The list markers are only appeared with this display value.

This question is asked on Stackoverflow before:

Your questions also point out what I think is missing with freecodecamp: lack of explanation.

PS: When posting your code to the forum, you should put your code between ``` and ``` (three backticks) to make your code preformatted for better readability, and provide the link to the exercise for better assistance.

1 Like