CSS 解决方案
使用 CSS 浮动属性使 <dt> 和 <dd> 并排放置。
另外，调整宽度。
在下面的示例中，我们对宽度属性使用百分比。
强制 <dt> 和 <dd> 元素保持在同一行的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
dl {
width: 100%;
overflow: hidden;
background: #dbe0da;
padding: 0;
margin: 0
}
dt {
float: left;
width: 50%;
background: #8b9fe0;
padding: 0;
margin: 0
}
dd {
float: left;
width: 50%;
background: #dbe0da;
padding: 0;
margin: 0
}
</style>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>
今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
</dd>
<dt>CSS</dt>
<dd>
经历过风雨，才懂得阳光的温暖。
</dd>
</dl>
</body>
</html>
HTML 它是设计用于在 Web 浏览器中显示的文档的标准标记语言。
CSS 是一种样式表语言，用于用标记语言描述文档的呈现方式。
所以，我们在一列中显示 <dt> 元素的内容，在另一列中显示对应的 <dd> 元素的内容，它们在同一行。
让我们看另一个例子。
强制 <dt> 和 <dd> 元素与 ::after 伪元素保持在同一行的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
dl {
border: 1px double #000;
padding: 10px;
}
dt {
float: left;
clear: left;
width: 100px;
text-align: right;
font-weight: bold;
color: #112b80;
}
dt::after {
content: ":";
}
dd {
margin: 0 0 0 110px;
padding: 0 0 0.5em 0;
}
</style>
</head>
<body>
<dl>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
</body>
</html>
在上面的例子中，我们使用了带有浮动的 clear 属性。
我们还在 <dt> 元素上添加了 ::after 伪元素。
我们还可以使用 Flexbox 使 <dt> 和 <dd> 元素保持在同一行。
将 <dl> 元素的 display 属性设置为“flex”。
强制 <dt> 和 <dd> 元素与 Flexbox 保持在同一行的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
dl {
display: flex;
flex-flow: row wrap;
border: solid #666;
border-width: 1px 1px 0 0;
}
dt {
flex-basis: 20%;
padding: 2px 4px;
background: #666;
text-align: right;
color: #fff;
}
dd {
flex-basis: 70%;
flex-grow: 1;
margin: 0;
padding: 2px 4px;
border-bottom: 1px solid #666;
}
</style>
</head>
<body>
<dl>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
</body>
</html>
其中我们还为 <dl> 元素添加了带有“row wrap”值的 flex-flow 属性。
然后，我们为 <dt> 和 <dd> 元素指定了 flex-basis 属性，为 <dd> 元素指定了 flex-grow 属性。
在此代码中，我们将找到一些强制 <dt> 及其对应的 <dd> 元素保持在同一行上的方法。
我们需要使用一些 CSS。
日期：2020-06-02 22:15:10 来源：oir作者：oir