Question

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

Answer 1

您不能将块元素嵌套在段落中。

如果您使用p更改div，则可行，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

ul内不允许

heading和paragraph，将p标记更改为div。

＆＃13;

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

＆＃13;

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

＆＃13;

CSS样式没有生效

2 个答案: