如何样式dt和dd，使他们在同一行?

使用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{
    /* Override browser defaults */
    display: inline;
    margin: 0;
}

dt  {
    clear:left;
    float:left;
    line-height:1; /* Adjust this value as you see fit */
    width:33%; /* 1/3 the width of the parent. Adjust this value as you see fit */
}

dd {
    clear:right;
    float: right;
    line-height:1; /* Adjust this value as you see fit */
    width:67%; /* 2/3 the width of the parent. Adjust this value as you see fit */
}

2018-04-09 20:02:55

其他回答

当将定义列表样式化为表时，我通常从以下开始:

dt,
dd{
    /* Override browser defaults */
    display: inline;
    margin: 0;
}

dt  {
    clear:left;
    float:left;
    line-height:1; /* Adjust this value as you see fit */
    width:33%; /* 1/3 the width of the parent. Adjust this value as you see fit */
}

dd {
    clear:right;
    float: right;
    line-height:1; /* Adjust this value as you see fit */
    width:67%; /* 2/3 the width of the parent. Adjust this value as you see fit */
}

2018-04-09 20:02:55

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

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

2012-11-14 00:56:48

这一工作显示他们作为表，与边界，它应该响应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>

2015-09-22 22:19:05

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

2015-07-16 14:05:55

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

2012-12-22 19:35:07

如何样式dt和dd，使他们在同一行?

推荐文章

最新文章

标签