CODEWITHSUNDEEP
htmlcssdisplay
Marie Boyer
Marie Boyer

Reputation: 33

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

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;
}

Upvotes: 2

Views: 775

Answers (2)

Ken
Ken

Reputation: 663

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;
}

Upvotes: 3

Abdush Shakoor Mohamed Nazeer
Abdush Shakoor Mohamed Nazeer

Reputation: 316

Try this:

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

Upvotes: 1

Related Questions