这是 HTML:
<div id="contact-details">
<p id="contact-details-first">
<h3>Address:</h3>
<ul>
<li>238 Parsley</li>
<li>Annlin, Pretoria</li>
<li>South Africa</li>
</ul>
</p>
</div>
这是 CSS:
#contact-details {
width: 80%;
background-color: #ddd;
margin: auto;
}
#contact-details-first > h3 {
display: inline-block;
float: left;
border: 1px solid yellow;
}
#contact-details-first > ul {
position: relative;
left: 100px;
border: 2px solid blue;
}
由于某些原因,底部的两个css样式没有生效。
#contact-details-first > h3
#contact-details-first > ul
最佳答案
您不能在段落中嵌套 block 元素。
如果您将 p
更改为 div
,它会起作用,如下所示:
#contact-details {
width: 80%;
background-color: #ddd;
margin: auto;
}
#contact-details-first > h3 {
display: inline-block;
float: left;
border: 1px solid yellow;
}
#contact-details-first > ul {
position: relative;
left: 100px;
border: 2px solid blue;
}
<div id="contact-details">
<div id="contact-details-first">
<h3>Address:</h3>
<ul>
<li>238 Parsley</li>
<li>Annlin, Pretoria</li>
<li>South Africa</li>
</ul>
</div>
</div>
关于html - CSS样式没有生效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35313425/