html - CSS-在单独的行上带有dt和dd的DL样式定义列表

我正在尝试在顶部行上设置定义列表的样式，而在单独一行的正下方直接放置相应的dd

的HTML

<dl>
    <dt>Term 1</dt>
    <dd>Definition 1</dd>

    <dt>Term 2</dt>
    <dd>Definition 2</dd>

    <dt>Term 3</dt>
    <dd>Definition 3</dd>
</dl>

的CSS

dl {
    margin: 0;
    padding: 0 0 30px;
}
dt, dd {
    float: left;
    margin: 0;
    width: 33%;
}

我需要他们坐在下面这样：

最佳答案

在每个<dl>和<dd>对周围没有包含元素（<dt>不提供或不允许）的元素，并且不求助于可能的脆性绝对定位，我想您会发现您需要不同的标记来完成该布局。

它在语义上不如您的原始标记干净，因为它将<dl>分为三个单独的定义列表，但将here's a working fiddle分成了三个列表。

关于html - CSS-在单独的行上带有dt和dd的DL样式定义列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30040856/