这是一个很好的问题,也是一个可以引起很多争论的问题,因为没有固定的方法来做到这一点。
他们中的许多人都有论据,但就我个人而言,我会保持简单。
<div class="profile">
<p>
<span class="label">First Name</span>
<span class="value">MyName</span>
</p>
<p>
<span class="label">Age </span>
<span class="value">MyAge</span>
</p>
<p>
<span class="label">Email</span>
<span class="value">MyEmail</span>
</p>
</div>
或者
<ul class="profile">
<li>
<span class="label">First Name</span>
<span class="value">MyName</span>
</li>
<li>
<span class="label">Age </span>
<span class="value">MyAge</span>
</li>
<li>
<span class="label">Email</span>
<span class="value">MyEmail</span>
</li>
</ul>
CSS 看起来像这样;
.profile p {
overflow: hidden;
}
.profile .label {
vertical-align: top;
float: left;
width: 40%;
}
.profile .value{
vertical-align: top;
float: left;
width: 60%;
}
没有在 CSS 中引用任何特定 html 节点名称的原因是,如果将来有一种公认的方法可以做到这一点,您只需更改 HTML 中的节点名称。