Html 如何设置 dt 和 dd 的样式，使它们在同一行上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1713048/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style dt and dd so they are on the same line?
提问by avernet
Using CSS, how can I style the following:
使用 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>
so the content of the dtshow in one column and the content of the ddin another column, with each dtand the corresponding ddon the same line? I.e. producing something that looks like:
那么dt一列中显示的内容和dd另一列中显示的内容，每个dt和对应的dd内容在同一行？即生产看起来像的东西：
采纳答案by eozzy
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>回答by Navaneeth
I have got a solution without using floats!
check this oncodepen
我有一个不使用浮点数的解决方案！
在codepen上检查这个
Viz.
即。
dl.inline dd {
display: inline;
margin: 0;
}
dl.inline dd:after{
display: block;
content: '';
}
dl.inline dt{
display: inline-block;
min-width: 100px;
}
Update - 3rdJan 2017:I have added flex-box based solution for the problem. Check that in the linked codepen& refine it as per needs. Thanks!
更新- 3次2017年1月：对这个问题我基于添加柔性一体化解决方案。在链接的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;
}
回答by silvster27
If you use Bootstrap 3 (or earlier)...
如果您使用 Bootstrap 3（或更早版本）...
<dl class="dl-horizontal">
<dt>Label:</dt>
<dd>
Description of planet
</dd>
<dt>Label2:</dt>
<dd>
Description of planet
</dd>
</dl>
回答by yckart
CSS Grid layout
CSS 网格布局
Like tables, grid layout enables an author to align elements into columns and rows.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
与表格一样，网格布局使作者能够将元素对齐到列和行中。
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
To change the column sizes, take a look at the grid-template-columnsproperty.
要更改列大小，请查看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>回答by ancestral
Assuming you know the width of the margin:
假设您知道边距的宽度：
dt { float: left; width: 100px; }
dd { margin-left: 100px; }
回答by Tyler Crompton
Because I have yet to see an example that works for my use case, here is the most full-proof solution that I was able to realize.
因为我还没有看到适用于我的用例的示例，所以这是我能够实现的最全面的解决方案。
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="#">[email protected]</a></dd>
<dt>Postal Address</dt>
<dd><div class="address">123 FAKE ST<br />EXAMPLE EX 00000</div></dd>
</dl>
TextStrangely enough, it doesn't work with display: inline-block. I suppose that if you need to set the size of any of the dtelements or ddelements, you could set the dl's display as display: flexbox; display: -webkit-flex; display: flex;and the flexshorthand of the ddelements and the dtelements as something like flex: 1 1 50%and displayas display: inline-block. But I haven't tested that, so approach with caution.
奇怪的是，它不适用于display: inline-block. 我想如果您需要设置任何dt元素或dd元素的大小，您可以将dl's display asdisplay: flexbox; display: -webkit-flex; display: flex;以及元素和元素的flex速记设置为类似和as 。但我还没有测试过，所以请谨慎使用。dddtflex: 1 1 50%displaydisplay: inline-block
回答by thirdender
See jsFiddle demo
I needed a list exactly as described for a project that showed employees at a company, with their photo on the left, and information on the right. I managed to accomplish the clearing by using psuedo-elements after every DD:
我需要一个完全按照项目描述的列表，该列表显示公司的员工，左边是他们的照片，右边是信息。我设法通过在每个之后使用伪元素来完成清除DD：
.myList dd:after {
content: '';
display: table;
clear: both;
}
In addition, I wanted the text to only display to the right of the image, without wrapping under the floated image (pseudo-column effect). This can be accomplished by adding a DIVelement with the CSS overflow: hidden;around the content of the DDtag. You can omit this extra DIV, but the content of the DDtag will wrap under the floated DT.
另外，我希望文本只显示在图像的右侧，而不是在浮动图像下环绕（伪列效果）。这可以通过在标签内容周围添加一个DIV带有 CSS的元素来实现。你可以省略这个额外的，但标签的内容将被包裹在浮动的.overflow: hidden;DDDIVDDDT
After playing with it a while, I was able to support multiple DTelements per DD, but not multiple DDelements per DT. I tried adding another optional class to clear only after the last DD, but subsequent DDelements wrapped under the DTelements (not my desired effect… I wanted the DTand DDelements to form columns, and the extra DDelements were too wide).
玩了一段时间后，我能够支持多个DT元素 per DD，但不能支持多个DD元素 per DT。我尝试添加另一个可选类以仅在最后一个 之后清除DD，但后续DD元素包裹在DT元素下（不是我想要的效果......我希望DT和DD元素形成列，而额外的DD元素太宽了）。
By all rights, this should only work in IE8+, but due to a quirk in IE7 it works there as well.
当然，这应该只适用于 IE8+，但由于 IE7 中的一个怪癖，它也适用于那里。
回答by Andrew Downes
Here's another option that works by displaying the dt and dd inline and then adding a line break after the dd.
这是另一个选项，它通过显示 dt 和 dd 内联然后在 dd 之后添加换行符来工作。
dt, dd {
display: inline;
}
dd:after {
content:"\a";
white-space: pre;
}
This is similar to Navaneeth's solution above, but using this approach, the content won't line up as in a table, but the dd will follow the dt immediately on every line regardless of length.
这类似于上面 Navaneeth 的解决方案，但使用这种方法，内容不会像表格一样排列，但 dd 将在每一行上立即跟在 dt 之后，而不管长度如何。
回答by Astrotim
I need to do this and have the <dt>content vertically centered, relative to the <dd>content. I used display: inline-block, together with vertical-align: middle
我需要这样做并使<dt>内容相对于内容垂直居中<dd>。我用过display: inline-block，连同vertical-align: middle
See full example on Codepen here
.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;
}
}
回答by enthusiastic123
Depending on how you style the dt and dd elements, you might encounter a problem: making them have the same height. For instance, if you want to but some visible border at the bottom of those elements, you most probably want to display the border at the same height, like in a table.
根据您如何设置 dt 和 dd 元素的样式，您可能会遇到一个问题：使它们具有相同的高度。例如，如果您想在这些元素的底部保留一些可见的边框，您很可能希望将边框显示在相同的高度，就像在表格中一样。
One solution for this is cheating and make each row a "dl" element. (this is equivalent to using tr in a table) We loose the original interest of definition lists, but on the counterpart this is an easy manner to get pseudo-tables that are quickly and pretty styled.
对此的一种解决方案是作弊并使每一行成为“dl”元素。（这相当于在表中使用 tr）我们失去了对定义列表的原始兴趣，但在对应方面，这是一种获得快速且样式漂亮的伪表的简单方法。
THE CSS:
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;}
THE HTML:
HTML：
<div class="huitCinqPts bord_inf_gc">
<dl><dt>Term1</dt><dd>Definition1</dd></dl>
<dl><dt>Term2</dt><dd>Definition2</dd></dl>
</div>
