将DT样式设置为浮动到DD左侧

Question

我正在尝试为定义列表添加样式，使得每个 dt 元素浮动到其对应的 dd 元素的左侧。我已经使用了以下代码：

dt {
    clear: both;
    float: left;
    width: 6em;
}
dd {
    margin-left: 6.5em;
}

这个方案已经实现了多个dd元素对应一个dt元素，并且可以处理跨越多行的dd文本。

但是，我想要处理一个dd元素对应多个dt元素的情况（这是有效的HTML），以及dt元素高度大于相应dd元素的情况（由于文本长度导致换行）。在这种情况下，样式会出现问题，后续的dd元素与其dt不对齐。

我尝试了各种方法，例如将dd元素浮动，但这会破坏多个dd元素的对齐。添加dd + dd { clear: both; }几乎可以解决问题，但是长的dd文本现在位于其dt下面（更不用说旧版浏览器不遵守规则了）。

有人成功做到了吗？我真的不想放弃并使用表格，但也许这是适当的。

我的测试标记在这里：http://pastebin.com/nmAQ5Xdm

- Rob Fletcher

---

抱歉，找不到解决方法。您可能需要使用“div”和“span”。 - Petah

Answer 1

我已经找到了一种方法来做到这一点，当你不介意限制 dl 元素的宽度时：

dl {
    max-width: 30em;
    overflow: hidden;
}
dt, dd {
    margin-top: 0.5em;
}
dt {
    clear: both;
    float: left;
    width: 6em;
}
dd {
    float: right;
    margin-left: 0.5em;
    width: 22.5em;
}

如果视口对于dl来说太窄，样式会出现问题，因此它并不完美。

- Rob Fletcher

---

+1 谢谢。如何使 dd 标签变宽一点，比如增加到 50em？ - JK.

dl 的 max-width 需要是 dt 和 dd 的宽度之和加上 dd 的 margin-left。 - Rob Fletcher

Answer 2

这对我有用。在dt上设置宽度并向左浮动。然后将dd保留为display:block（默认值），并给它相同数量的margin-left。现在，dd将以与dt相同的宽度换行。您的dt的浮动将自动清除block dd。通过调整dd的margin-bottom来调整dt/dd对之间的间距。

如果您可能有空的dd，则还可以添加clear:both和margin-bottom到您的dt中，以便它不需要dd内容即可放置在正确位置。

dt {
    float: left;
    width: 8em;
    clear: both;
    margin-bottom: 1em;
}
dd {
    margin-left: 8em;
}
dd {
    margin-bottom: 1em;
}

- Carl G

---

不处理OP的“dt元素比相应的dd更高的情况…” - Brad Kent