Question

我想显示几行数据，每行都有一个标题和同一行的一些数据。这个问题肯定已经在SO（即How to style dt and dd so they are on the same line?）得到了解答，但是，它似乎对我没有用。以下似乎有效，除非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>

Answer 1

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

如果可以，是的，只需在任何空元素中添加nbsp;即可。这是跨浏览器最简单的解决方案。

一个简单，纯粹的CSS修复就像这样：

dd:after {content:"."}

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

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

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

（dt和dd min-height需要相同！）

demo

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

Answer 2

这适用于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>

See the JSFiddle

在同一行显示DT和DD的定义列表

2 个答案: