4

我想显示几行数据，每行都有一个标题和一些数据在同一行。这个问题肯定已经在 SO 上得到了回答（即如何设置 dt 和 dd 的样式，以便它们在同一行？），但是，它似乎对我不起作用。以下似乎有效，除非 DD 没有修复它的内容。我对IE7+感兴趣。我这样做是正确的吗？谢谢

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title>Untitled</title>
        <style>
            dl {width: 395px; font-size:12px}
            dd,dt  {padding-top:5px;padding-bottom:5px;}
            dt {float:left; padding-right: 5px; font-weight: bolder;}
            /* dd {padding-left: 5px;} Does not work */
        </style>

    </head>
    <body>
        <dl>
            <dt>DT Element 1:</dt><dd>DD Elem 1</dd>
            <dt>DT Second Element:</dt><dd>DD Element Two</dd>
            <dt>DT Elem 3:</dt><dd></dd>
            <dt>DT Element 4:</dt><dd>DD Elem 4</dd>
            <dt>DT Fifth Element:</dt><dd>&nbsp;</dd>
            <dt>DT Elem 6:</dt><dd>DD Element Six</dd>
        </dl>  
    </body>
</html>
4

2 回答 2

6

您的问题是dd没有生成空白并留下空白空间（高度：0px）。

如果可以的话，是的，只需将 anbsp;放在任何空元素内。这是跨浏览器工作的最简单的解决方案。

一个简单的纯 css 修复将是这样的：

dd:after {content:"."}

但它在每个定义后添加一个点......

您也可以简单地在 dd 上设置最小高度：

dt {clear: left;}
dt, dd {min-height:1.5em;}

（dt 和 dd 最小高度必须相同！）

演示

...如果您的dt身高不规律（例如，如果它有时在 2 行上），您可能会遇到问题。

于 2012-12-04T19:10:54.673 回答
0

这适用于 IE7+，符合标准，并允许不同的高度。

<style>
dt {
    float: left;
    clear: left;
    width: 100px;        
    padding: 5px 0;
    margin:0;
}
dd {
    float: left;
    width: 200px;
    padding: 5px 0;
    margin:0;
}
.cf:after {
    content:'';
    display:table;
    clear:both;
}
</style>

<dl class="cf">
    <dt>A</dt>
    <dd>Apple</dd>
    <dt>B</dt>
    <dd>Banana<br>Bread<br>Bun</dd>
    <dt>C</dt>
    <dd>Cinnamon</dd>
</dl>

请参阅 JSFiddle。

于 2014-07-02T17:09:55.607 回答