Page 146 - css揭秘

21 插入换行

难题

通过 CSS 来插入换行的需求通常与定义列表（参见图 5-3）有关，但有时
也涉及其他场景。在通常情况下，采用定义列表是因为我们立志在互联网上以
身作则，坚持使用合适的标签、合理的语义——哪怕在视觉上所要呈现的只是
一行行的名值对，我们也会认真对待。举例来说，考虑下面这段结构代码：

<dl> HTML
<dt>Name:</dt>
<dd>Lea Verou</dd>

<dt>Email:</dt> 图 5-3
<dd>lea@verou.me</dd>
一个定义列表，每行都是一个名
<dt>Location:</dt> 值对
<dd>Earth</dd>
</dl>

我们所期望的视觉效果有时就是图 5-3 那样的简单样式。第一步通常是
给它添加一些基本的 CSS：

dd {
margin: 0;
font-weight: bold;
}

不过，由于这些 <dt> 和 <dd> 都是块级元素，我们最终得到的往往
是图 5-4 这样的结果，所有的名和值均独占一行。我们接下来可能会给这
些 <dt> 或 <dd> 元素（或两者）指定其他的 display 属性值——人们走
投无路时往往会胡乱尝试。不过这样一来，我们得到的结果通常如图 5-5
所示。

在我们把头发揪光、咒骂 CSS 或者干脆放弃结构与样式分离转而修改
结构之前，有没有办法可以同时保全我们的神智和（技术上的）操守？ 图 5-4
这个定义列表的默认样式
解决方案

基本上，我们需要做的只是在每个 <dd> 后面添加一个换行。如果不在
乎使用表现型的结构标记，可以请出老套的 <br> 元素，比如这样： 图 5-5
display:inline 在这里会帮倒忙

21 插入换行 115

඀ࠡ JOEC