如何风格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在同一行上？ 即生产如下的东西：
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>
我有一个解决scheme，而不使用浮动！
检查这 codepen
即
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日：我已经添加了基于弹性盒的解决scheme。 检查链接的codepen并根据需要进行优化。 谢谢！
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; }
如果你使用bootstrap …
<dl class="dl-horizontal"> <dt>Label:</dt> <dd> Description of planet </dd> <dt>Label2:</dt> <dd> Description of planet </dd> </dl>
假设你知道边距的宽度：
dt { float: left; width: 100px; } dd { margin-left: 100px; }
因为我还没有看到一个适用于我的用例的例子，所以这是我能够实现的最全面的解决scheme。
dd { margin: 0; } dd::after { content: '\A'; white-space: pre-line; } dd:last-of-type::after { content: ''; } dd, dt { display: inline; } dd, dt, .address { vertical-align: middle; } dt { font-weight: bolder; } dt::after { content: ': '; } .address { display: inline-block; white-space: pre; }
Surrounding <dl> <dt>Phone Number</dt> <dd>+1 (800) 555-1234</dd> <dt>Email Address</dt> <dd><a href="#">example@example.com</a></dd> <dt>Postal Address</dt> <dd><div class="address">123 FAKE ST<br />EXAMPLE EX 00000</div></dd> </dl> Text
看到jsFiddle演示
我需要一个完全按照一个公司员工的项目描述的列表，左边是他们的照片，右边是信息。 我设法通过在每个DD之后使用psuedo-elements来完成清除：
.myList dd:after { content: ''; display: table; clear: both; }
另外，我希望文本只显示在图像的右侧，而不包含在浮动图像下（伪列效果）。 这可以通过添加CSS overflow: hidden;的DIV元素来完成overflow: hidden; 围绕DD标签的内容。 你可以省略这个额外的DIV ，但是DD标签的内容将会包含在浮动的DT 。
玩了一段时间后，我能够支持每个DD多个DT元素，但不支持每个DT多个DD元素。 我尝试添加另一个可选类，只在最后一个DD之后清除，但随后的DD元素包装在DT元素下（不是我想要的效果…我想要DT和DD元素形成列，而额外的DD元素太宽）。
所有权利，这应该只在IE8 +，但由于在IE7怪癖它也适用于那里。
我需要这样做，并使<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; } }
这是另一个选项，通过内联dt和dd显示，然后在dd之后添加换行符。
dt, dd { display: inline; } dd:after { content:"\a"; white-space: pre; }
这与Navaneeth的解决scheme类似，但是使用这种方法，内容不会像表中那样排列，但是dd将在每行上立即跟随dt，而不pipe长度如何。
根据你如何devisedt和dd元素，你可能会遇到一个问题：使它们具有相同的高度。 例如，如果你想在这些元素的底部有一些可见的边框，你可能想要在同一个高度显示边框，就像在表格中一样。
对此的一个解决scheme是作弊，并使每一行成为“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>
我发现了一个对我来说很完美的解决scheme，但它需要额外的<div>标签。 事实certificate，没有必要使用<table>标签来alignment表，只要使用display:table-row; 并display:table-cell; 款式：
<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>
我最近需要通过在<dt>元素上指定内联<dd>元素后面的dl-inline类来混合内联和非内联dt / 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 >
CSS网格布局
像表格一样，网格布局使作者能够将元素alignment到列和行中。
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>
这适用于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 。
这个工作将它们显示为带有边框的表格，它应该以第一列的宽度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>
在我看来，3zzy的解决scheme非常有效。
作为一个小的附录，如果你使用dd / dt的x / y变换（或“顶部”/“底部”），那么溢出隐藏会导致顶部和底部的dd / dt被截断。 如果是这种情况，那么less量的填充将解决这个问题。
这可能是一种罕见的情况，添加填充的概念对于更多老练的前端开发人员来说可能是相当明显的:)。
我不确定为什么build议宽度设置为100％，但不是高度。
dl { width: 100%; height: 100%; overflow: hidden; }
大多数人在这里build议的工作，但是你应该只将通用代码放入样式表中，并将特定的代码放在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>
看起来像这样
