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


当前回答

CSS网格布局

与表一样,网格布局允许作者将元素对齐为列和行。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

要更改列大小,请查看grid-template-columns属性。

dl { display: grid; grid-template-columns: max-content auto; } dt { grid-column-start: 1; } dd { grid-column-start: 2; } <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 { float: left; width: 100px; }
dd { margin-left: 100px; }

我需要这样做,并让<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;
  } 
}

CSS网格布局

与表一样,网格布局允许作者将元素对齐为列和行。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

要更改列大小,请查看grid-template-columns属性。

dl { display: grid; grid-template-columns: max-content auto; } dt { grid-column-start: 1; } dd { grid-column-start: 2; } <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>

我找到了一个对我来说似乎完美的解决方案,但它需要额外的<div>标记。 事实证明,没有必要使用<table>标记来像在表中那样对齐,使用display:table-row;和显示:表格单元;风格:

<style type="text/css">
dl > div {
  display: table-row;
}
dl > div > dt {
  display: table-cell;
  background: #ff0;
}
dl > div > dd {
  display: table-cell;
  padding-left: 1em;
  background: #0ff;
}
</style>

<dl>
  <div>
    <dt>Mercury</dt>
    <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  </div>
  <div>
    <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>
  </div>
  <div>
    <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>
  </div>
</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>