使用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在同一行?即生产出看起来像这样的东西:


当前回答

参见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中的一个怪癖,它也可以在那里工作。

其他回答

假设你知道页边距的宽度:

dt { float: left; width: 100px; }
dd { margin-left: 100px; }

我有一个解决方案,不使用浮标! 在codeen上检查这个

Viz.

dl.inline dd {
  display: inline;
  margin: 0;
}
dl.inline dd:after{
  display: block;
  content: '';
}
dl.inline dt{
  display: inline-block;
  min-width: 100px;
}

更新- 2017年1月3日:我已经为这个问题添加了基于弹性盒的解决方案。在链接的代码依赖中检查并根据需要提炼它。

dl.inline-flex {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 300px;      /* set the container width*/
  overflow: visible;
}
dl.inline-flex dt {
  flex: 0 0 50%;
  text-overflow: ellipsis;
  overflow: hidden;
}
dl.inline-flex dd {
  flex:0 0 50%;
  margin-left: auto;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
}

这里的大多数建议都是可行的,但是您应该只将通用代码放入样式表中,并将特定代码放入如下所示的html代码中。否则,您将最终得到一个臃肿的样式表。

我是这样做的:

你的样式表代码:

<style>
    dt {
        float:left;
    }
    dd {
        border-left:2px dotted #aaa;
        padding-left: 1em;
        margin: .5em;
    }   
</style>

你的html代码:

<dl>
    <dt>1st Entity</dt>
    <dd style="margin-left: 5em;">Consumer</dd>
    <dt>2nd Entity</dt>
    <dd style="margin-left: 5em;">Merchant</dd>
    <dt>3rd Entity</dt>
    <dd style="margin-left: 5em;">Provider, or cToken direct to Merchant</dd>
    <dt>4th Entity</dt>
    <dd style="margin-left: 5em;">cToken to Provider</dd>
</dl>

是这样的

这一工作显示他们作为表,与边界,它应该响应3em的宽度第一列。换行只是将比列宽的任何单词分开

 dl { display:block;
      border:2px solid black;
      margin: 1em;}  
 dt { display:inline-block;
      width:3em;
      word-wrap:break-word;} 
 dd { margin-left:0;
      display:inline;
      vertical-align:top;
      line-height:1.3;} 
 dd:after { content:'';display:block; } 

<table>与<dl>的比较:

<!DOCTYPE html> <html> <style> dl { display:block;border:2px outset black;margin:1em; line-height:18px;} dt { display:inline-block;width:3em; word-wrap:break-word;} dd { margin-left:0; display:inline; vertical-align:top; line-height:1.3;} dd:after { content:'';display:block; } .glosstable { border:2px outset #aaaaaa;margin:1em; text-align:left} .glosstable, table, tbody, tr, td, dl, dt {font-size:100%; line-height:18px;} .glossaz { font-size:140%;padding-left:2em;font-weight:bold;color: #00838c; } td.first {width: 2.5em;} </style> <body> Table<br> <table class="glosstable"> <tr><td class="first">Milk</td> <td class="glossdata">Black hot drink</td> </tr> <tr><td class="first">Coffee2</td> <td class="glossdata">Black hot drink</td> </tr> <tr><td>Warm milk</td> <td class="glossdata">White hot drink</td> </tr> </table> DL list <br> <dl class="glosstablep"> <dt>Milk</dt> <dd class="glossdata">White cold drink</dd> <dt>Coffee2</dt> <dd class="glossdata">Black cold drink</dd> <dt>Warm Milk</dt> <dd class="glossdata">White hot drink</dd> </dl> </body> </html>

以下是一个基于弹性的解决方案(SCSS):

dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  dt {
    width: 150px;
  }
  dd {
    margin: 0;
    flex: 1 0 calc(100% - 150px);
  }
}

适用于以下HTML (pug)

dl
  dt item 1
  dd desc 1
  dt item 2
  dd desc 2