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

根据对dt和dd元素的样式不同，您可能会遇到一个问题:使它们具有相同的高度。例如，如果你想在这些元素的底部添加一些可见的边界，你很可能想在相同的高度显示边界，就像在表格中一样。

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>

我找到了一个解决方案，似乎完美的我，但它需要额外的<div>标签。 事实证明，没有必要使用<table>标记来像在表中那样对齐，使用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 { float: left; width: 100px; }
dd { margin-left: 100px; }

这里的大多数建议都是可行的，但是您应该只将通用代码放入样式表中，并将特定代码放入如下所示的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>

看起来像这样

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

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

看到jsFiddle演示

我需要一份完全符合项目描述的列表，该列表展示了一家公司的员工，左边是他们的照片，右边是他们的信息。我设法通过在每个DD之后使用pseudo -elements来完成清理:

.myList dd:after {
content: '';
display: table;
clear: both;
}

此外，我希望文本只显示在图像的右侧，而不是在浮动图像下进行包装(伪列效果)。这可以通过在DD标记的内容周围添加一个带有CSS overflow: hidden;的DIV元素来实现。你可以省略这个额外的DIV，但是DD标记的内容将被包装在浮动的DT下面。

在玩了一段时间后，我能够支持每个DD多个DT元素，但不支持每个DT多个DD元素。我尝试添加另一个可选类，只在最后一个DD之后清除，但随后的DD元素包装在DT元素之下(不是我想要的效果…我想要DT和DD元素形成列，而额外的DD元素太宽)。

根据所有的权利，这应该只能在IE8+中工作，但由于IE7中的一个怪癖，它也可以在那里工作。

我有一个解决方案没有使用浮动!
看看这个 < a href = " http://cdpn。io / nvgCz noreferrer“rel = > codepen < / >

即。

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

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;
}

下面是另一个选项，通过内联显示dt和dd，然后在dd后面添加换行符。

dt, dd {
display: inline;
}
dd:after {
content:"\a";
white-space: pre;
}

这类似于上面Navaneeth的解决方案，但是使用这种方法，内容不会像在表中那样排列，但是无论长度如何，dd将立即在每一行上跟随dt。

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

我需要这样做，并让<dt>内容垂直居中，相对于<dd>内容。我使用了display: inline-block和vertical-align: middle

< a href = " http://codepen。 . io/astrotim/pen/JdBoJe">在这里看到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;
}
}

因为我还没有看到一个适用于我的用例的示例，所以这里是我能够实现的最完整的解决方案。

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

奇怪的是，它对display: inline-block不起作用。我认为如果你需要设置任何dt元素或dd元素的大小，你可以将dl的显示设置为display: flexbox; display: -webkit-flex; display: flex;，并将dd元素和dt元素的flex简写设置为flex: 1 1 50%和display设置为display: inline-block。但我还没有对此进行测试，所以请谨慎处理。

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

我最近需要混合内联和非内联dt/dd对，方法是在<dt>元素上指定类dl-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


>

CSS网格布局

和表格一样，网格布局允许作者将元素排列成列和行 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout < / em >

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>