Question

我正在尝试设置定义列表的样式，使每个dt浮动到相应的dd元素的左侧。我用过：

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

尽可能地发挥作用。它可以很好地处理每个dd和dt文本的多个dd元素，这些元素足够长，可以跨越多行。

但是，我真的希望能够处理每个dt（有效HTML）和dd元素的多个dt元素，这些元素高于相应的{{ 1}}元素（由于文本的长度导致行换行）。此时，样式崩溃，后续dd元素与dd不一致。

我尝试过各种各样的事情，例如浮动dt，这会破坏多个dd元素的对齐。添加dd几乎可以工作但现在很长的dd + dd { clear: both; }文本位于其dd下（更不用说旧版浏览器不遵守规则）。

有没有人设法做到这一点？我真的不想放弃并使用表格，但也许这是合适的。

我的测试标记位于：http://pastebin.com/nmAQ5Xdm

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而言太窄，样式会破坏，这并不完美。

Answer 2

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

如果你可能有空的dds，那么你也可以将clear: both和margin-bottom添加到你的dt中，这样它就会在没有dd内容的情况下最终放到正确的位置。

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

样式DT浮动DD左侧

2 个答案: