html - 如何将css应用到div类中的li来显示 block ?

标签 html css display

如何获取 .sources div 类中的列表项以显示 block ?我将 display:block 放入该 div 类的 css 中,但它不适用。

关于该做什么以及为什么不应用这种风格有什么想法吗?谢谢您和下面的代码!

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

最佳答案

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

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

关于html - 如何将css应用到div类中的li来显示 block ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68649815/

相关文章:

javascript - html-javascript 追加无效

html - CSS 中的 3 行布局

javascript - 为具有 2 位小数的数字添加逗号分隔符

css - 如何减慢关键帧动画的速度?

html - 为什么背景图像没有显示在这个简单的代码中?

javascript - 如何使用 HTML5 从客户端访问 Secugen Hamster Plus

javascript - 使用 Meteor 集合中的元素数量更改 css。

html - 以不同的顺序排列div

html - 尽管使用显示 block ,但 margin 自动不被尊重

android - 不同的 Android 屏幕,不同的颜色,我们可以将屏幕编程为看起来相同吗?