Learn Accessibility by Building a Quiz - Step 45

Tell us what’s happening:

Right before I set the display property of li to block, I can see that they are acting list elements and have bullet points of the color #dfdfe2. As soon as I set the display property to block the bullet points disappear (picture of before and after attached). Why is this happening? I don’t understand.

Before
Web capture_18-1-2024_32124_www.freecodecamp.org
After
Web capture_18-1-2024_32154_www.freecodecamp.org

PS. If you need the entire code, please let me know. I’ll edit the post or share it in the comments. I just didn’t share it all because it felt more of a hindrance than help for the readers. Also, thanks in advance :slight_smile:

Your code so far

<!-- html-->
<header>
  <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
  <h1>HTML/CSS Quiz</h1>
  <nav>
    <ul>
      <li><a href="#student-info">INFO</a></li>
      <li><a href="#html-questions">HTML</a></li>
      <li><a href="#css-questions">CSS</a></li>
    </ul>
  </nav>
</header>
/*css*/
nav li {
  color: #dfdfe2;
  margin: 0 0.2rem;
  padding: 0.2rem;
  display: block;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0

Challenge Information:

Learn Accessibility by Building a Quiz - Step 45

  • i suppose its happening due to “block” behavior
  • you can also have this effect by other ways as well, such as “list-style”

happy coding :slight_smile:

1 Like