如何获取 .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/