使用CSS,我如何样式如下:

<dl>
    <dt>Mercury</dt>
    <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
    <dt>Venus</dt>
    <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
    <dt>Earth</dt>
    <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>

dt的内容显示在一列,dd的内容显示在另一列,每个dt和对应的dd在同一行?即生产出看起来像这样的东西:


当前回答

下面是另一个选项,通过内联显示dt和dd,然后在dd后面添加换行符。

dt, dd {
 display: inline;
}
dd:after {
 content:"\a";
 white-space: pre;
}

这类似于上面Navaneeth的解决方案,但是使用这种方法,内容不会像在表中那样排列,但是无论长度如何,dd将立即在每一行上跟随dt。

其他回答

我需要这样做,并让<dt>内容垂直居中,相对于<dd>内容。我使用display: inline-block和vertical-align: middle

在这里查看Codepen的完整示例

.dl-horizontal {
  font-size: 0;
  text-align: center;

  dt, dd {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    width: calc(50% - 10px);
  }

  dt {
    text-align: right;
    padding-right: 10px;
  }

  dd {
    font-size: 18px;
    text-align: left;
    padding-left: 10px;
  } 
}

参见jsFiddle演示

我需要一份完全符合项目描述的列表,该列表展示了一家公司的员工,左边是他们的照片,右边是他们的信息。我设法在每个DD之后使用伪元素来完成清理:

.myList dd:after {
  content: '';
  display: table;
  clear: both;
}

此外,我希望文本只显示在图像的右侧,而不是在浮动图像下进行包装(伪列效果)。这可以通过添加一个带有CSS overflow: hidden;DD标签的内容。您可以省略这个额外的DIV,但是DD标记的内容将被包装在浮动的DT下面。

在使用了一段时间后,我能够支持每个DD的多个DT元素,但不能支持每个DT的多个DD元素。我尝试添加另一个可选类,只在最后一个DD之后清除,但随后的DD元素包装在DT元素下(不是我想要的效果……我希望DT和DD元素形成列,而额外的DD元素太宽)。

根据所有的权利,这应该只能在IE8+中工作,但由于IE7中的一个怪癖,它也可以在那里工作。

dl { width: 100%; overflow: hidden; background: #ff0; padding: 0; margin: 0 } dt { float: left; width: 50%; /* adjust the width; make sure the total of both is 100% */ background: #cc0; padding: 0; margin: 0 } dd { float: left; width: 50%; /* adjust the width; make sure the total of both is 100% */ background: #dd0; padding: 0; margin: 0 } <dl> <dt>Mercury</dt> <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd> <dt>Venus</dt> <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd> <dt>Earth</dt> <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd> </dl>

根据对dt和dd元素的样式不同,您可能会遇到一个问题:使它们具有相同的高度。例如,如果你想在这些元素的底部添加一些可见的边界,你很可能想在相同的高度显示边界,就像在表格中一样。

一种解决方案是作弊,将每一行都设置为“dl”元素。 (这相当于在表中使用tr) 我们失去了定义列表的原始兴趣,但在对应的情况下,这是一种简单的方式来获得快速和漂亮的伪表。

CSS:

dl {
 margin:0;
 padding:0;
 clear:both;
 overflow:hidden;
}
dt {
 margin:0;
 padding:0;
 float:left;
 width:28%;
 list-style-type:bullet;
}
dd {
 margin:0;
 padding:0;
 float:right;
 width:72%;
}

.huitCinqPts dl dt, .huitCinqPts dl dd {font-size:11.3px;}
.bord_inf_gc dl {padding-top:0.23em;padding-bottom:0.5em;border-bottom:1px solid #aaa;}

HTML:

<div class="huitCinqPts bord_inf_gc">
  <dl><dt>Term1</dt><dd>Definition1</dd></dl>
  <dl><dt>Term2</dt><dd>Definition2</dd></dl>
</div>

如果你使用Bootstrap 3(或更早)…

<dl class="dl-horizontal">
    <dt>Label:</dt>
    <dd>
      Description of planet
    </dd>
    <dt>Label2:</dt>
    <dd>
      Description of planet
    </dd>
</dl>