造型DT浮动到DD的左边

我试图设计一个定义列表，使每个dt浮动到其相应的dd元素的左侧。我已经使用：造型DT浮动到DD的左边

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

它的工作就像它走了。它很好地处理了多个dd元素，每dt和dd文本足够长，可以跨越多行。

然而，我很想能够与多个应对每dddt元件（它是有效的HTML）和dt元素比相应dd元件（由于文本的长度较高导致行换行）。此时，造型破裂，随后的dd元素与dt脱节。

我已经尝试了各种东西，例如漂浮dd以及多个dd元素的对齐。添加dd + dd { clear: both; }几乎可以工作，但现在长dd文本位于其dt（更不用说旧的浏览器不尊重规则）。

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

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

来源

2011-02-02 Rob Fletcher

对不起，找不到办法做到这一点。您可能必须使用`div`和`span` – Petah 2011-02-02 11:27:48

我已经想出了一个办法做到这一点的时候，你不介意约束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太窄，则造型会中断。

来源

2011-02-27 14:09:00

+1谢谢。你如何让dd更宽一点，也许高达50em？ – 2011-07-21 01:34:19

这对我有用。在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; 
}

来源

2013-08-17 20:38:10

造型DT浮动到DD的左边

回答

相关问题