描述列表:每对都在自己的行上

Question

我有一个描述列表，我需要将每个描述与其术语放在同一行中。

我可以使用如下所示的代码，但我不喜欢它。看起来像是石器时代的非专业代码。我认为它应该在这里使用flexbox，但如何使用呢？

dt, dd { float: left; }
dt { clear: both; font-weight: bold; }
dd { margin-inline-start: 1em; } /* I would rather avoid overwriting browser defaults... */

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Answer 1

在dl上应用display: flex可以帮助您实现CSS flexbox。但是，为了使其更加专业，您可以考虑添加color、padding和各种文本格式样式。

dl {
display: flex;
flex-wrap: wrap;
/*change width, font-family and margin as per your requirement*/
max-width: 400px;
margin: 0 auto;
font-family: helvetica, arial, sans-serif
}
dt,
dd {
width: 50%;
padding: 10px;
box-sizing: border-box;
margin: 0;
}
dt {
font-weight: 700;
background: #ddd;
border: 1px solid #ccc;
}
dd {
background: #f2f2f2;
border: 1px solid #ccc;
}

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Answer 2

因此，基本上我会将display: flex;应用于dt，因为它是子元素的包装器，并应用这样的样式：

dl {
display: flex;
flex-flow: row wrap;
}
dt, dd {
width: 50%;
}

基本上，我们告诉flexbox在行中显示项目，如果项目不能包含在dl的宽度中，我们将其包装到下一行。

在dt, dd上，我们只将它们设置为整个包装宽度的50%，以使行中的2个元素最大化

如果你需要更多的背景，你可以看看css技巧，他们疯狂的非常好的指南来灵活

Answer 3

您可能需要重新构造使用flex的代码。以下是您需要的一切->Flexbox 完整指南

对于您的账单

看起来有些不专业的东西，来自石器时代的

我更喜欢使用其他字体样式，而不是dt、dl。这些都是非常过时的