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

当前回答

以下是一个基于弹性的解决方案(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

2020-08-11 23:54:37

其他回答

这适用于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>

请参阅JSFiddle。

2014-07-01 23:39:54

我有一个解决方案，不使用浮标! 在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;
}

2014-01-21 14:45:50

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

如果你使用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

我最近需要混合内联和非内联dt/dd对，通过指定类dl-inline on <dt>元素后面应该跟着inline <dd>元素。

dt.dl-inline { display: inline; } dt.dl-inline:before { content:""; display:block; } dt.dl-inline + dd { display: inline; margin-left: 0.5em; clear:right; } <dl> <dt>The first term.</dt> <dd>Definition of the first term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd> <dt class="dl-inline">The second term.</dt> <dd>Definition of the second term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd> <dt class="dl-inline">The third term.</dt> <dd>Definition of the third term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd> <dt>The fourth term</dt> <dd>Definition of the fourth term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd> </dl >

2015-11-11 15:01:25

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

推荐文章

最新文章

标签