Css 显示定义列表，DT和DD位于同一行_Css

Css 显示定义列表，DT和DD位于同一行

css

Css 显示定义列表，DT和DD位于同一行,css,Css,我想展示几行数据，每行都有一个标题，在同一行上有一些数据。这个问题已经得到了肯定的回答，但是，它似乎对我不起作用。以下似乎是可行的，除非DD没有内容，而a在其中修复了它。我对IE7+感兴趣。我这样做对吗？谢谢 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title>

我想展示几行数据，每行都有一个标题，在同一行上有一些数据。这个问题已经得到了肯定的回答，但是，它似乎对我不起作用。以下似乎是可行的，除非DD没有内容，而a在其中修复了它。我对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>


无标题
dl{宽度：395px；字体大小：12px}
dd，dt{填充顶部：5px；填充底部：5px；}
dt{float:left；padding right:5px；字体重量：粗体；}
/*dd{padding left:5px；}不起作用*/
DT要素1:DD要素1
DT第二元素：DD元素二
DT要素3：
DT要素4:DD要素4
第五要素：
DT元素6:DD元素6

您的问题是没有生成空的

dd

，并留下一个空的空间（高度：0px）

如果可以，可以，只需输入一个

nbsp在任何空元素内。这是跨浏览器工作的最简单解决方案
一个简单、纯粹的css修复程序如下所示：
dd:after {content:"."}

但它会在每个定义后添加一个点
您也可以简单地在dd上设置最小高度：
dt {clear: left;}
dt, dd {min-height:1.5em;}

（dt和dd最小高度需要相同！）

…如果您的dt
高度不规则（例如，如果有时在两行上），您可能会遇到问题。
这适用于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>        


dt{
浮动：左；
清除：左；
宽度：100px；
填充：5px0；
保证金：0；
}
dd{
浮动：左；
宽度：200px；
填充：5px0；
保证金：0；
}
.cf：之后{
内容：''；
显示：表格；
明确：两者皆有；
}
A.
苹果
B
香蕉面包
C
肉桂色

.
可能的重复如果您知道您的问题与现有问题完全相同，您不应该提出新问题，但如果需要，请对答案进行澄清。@JukkaK.Korpela如何最好地做到这一点？Jukka是正确的。浮动dt和dd，并给dt一个设置的宽度。给dt一个设置的宽度将需要一个单独的CSS声明，每个声明都是特定于包含的数据的。谢谢Kraz，啊，没有高度。现在它有意义了。使用CSS添加内容对我来说似乎有点奇怪。您的最小高度解决方案似乎运行良好。我想问一下，为什么要将dt{clear:left；}
？这是针对dt
高度大于dd
高度的情况。你可能不需要它。事实上，我已经通过浮动两个元素并清除第一个元素实现了。没有固定的宽度，两个元素的高度可以不同。记住清除你的“dl”！（或者你可能会有一些问题。）如果我没记错的话，内容部分不适用于ie7。再次感谢。顺便说一句，你的最新解决方案不适用于IE7，但是，你的第一个解决方案适用。@Kraz你应该更新你的答案，使其包含使两个元素都向左浮动并去掉最小高度的版本，因为这是一个比前两个好得多的解决方案。