如何将css应用于div中的li class显示块？

Question

如何获取 .sources div class 中的列表项以显示块？我把 display:block 放在 css 中表示 div class，但它不适用。

关于要做什么以及为什么不应用该样式的任何想法？谢谢你和下面的代码！

这是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>

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

Answer 1

试试这个：

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

Answer 2

将 display: block; 应用于 .source 不起作用，因为 .source 是包装列表和列表项的容器。为了使其正常工作，您需要像这样在 .sources 中定位列表和列表项。

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

如何将css应用于div中的li class显示块？

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

html

css

display