How to apply css to li in div class to display block?

user_16589978 0
Viewed 378

How do I get the list items in the .sources div class to display block? I put display:block in the css for that div class, but it's not applying.

Any ideas on what to do and why it's not applying that style? Thank you and code below!

Here's the HTML:

  <body>
     <ul>
      <li><a href="index.html"> Home </a></li>
      <li><a href="info.html"> Info </a></li>
      <li><a href="sources.html"> Sources </a></li>
     </ul>
    <h2> Project sources: </h2>
    <div class="sources">
    <ul>
      <li> https://behindthescenes.nyhistory.org/tiffany-girls/ </li>
      <li>
        https://www.nyhistory.org/exhibitions/a-new-light-on-tiffany
      </li>
      </ul>
    </div>   
  </body>
</html>

Here's the CSS:

@import url('https://fonts.googleapis.com/css2? 
family=Homemade+Apple&family=Raleway:wght@100&display=swap');

body {
  background-color: lavender;
  font-family: 'Raleway', sans-serif;
  margin-left: 50px;
  margin-right: 50px;
}

h1 {
  font-family: 'Homemade Apple', cursive;
  font-size: 60px;
}

h1, ul {
  list-style-type: none;
}

ul li {
  display: inline-block;
  margin: 50px;  
}

img {
  width: 70%;
  margin-bottom: 1px;
  border: 20px solid cornsilk;
}

p {
  width: 75%;
  margin-bottom: 50px;
}

.sources {
  display: block;
}
display css html
2 Answers

Applying display: block; to .source doesn't work because .source is the container wrapping your list and list items. In order for it to work you need to target the list and list items inside .sources like this.

.sources > ul > li {
  display: block;
}
user_79569330

Try this:

.sources > ul > li {
  display: block;
}
user_69478840
Related