[分享]css中dl 怎么向下移动

假设我们有如下的 HTML 结构： 标题 1 内容 1 标题 2 内容 2 标题 3 内容 3 在默认情况下，`dl` 的子元素 `dt` 和 `dd` 是横向排列的。如果我们要将它们垂直排列，并...

假设我们有如下的 HTML 结构：

<dl>
  <dt>标题 1</dt>
  <dd>内容 1</dd>
  <dt>标题 2</dt>
  <dd>内容 2</dd>
  <dt>标题 3</dt>
  <dd>内容 3</dd>
</dl> 

在默认情况下，`dl` 的子元素 `dt` 和 `dd` 是横向排列的。如果我们要将它们垂直排列，并且将整个 `dl` 向下移动一定的距离，可以使用如下的 CSS：

dl {
  display: flex;
  flex-direction: column;
  margin-top: 20px; // 向下移动 20 像素
}
<br>
dt {
  font-weight: bold;
}
<br>
dd {
  margin-left: 0; // 清除默认的 margin-left
} 

上面的代码做了如下的事情：
1. 将 `dl` 的显示模式设为 `flex`； 2. 设置 `flex-direction` 为 `column`，使子元素纵向排列； 3. 给 `dl` 设置 `margin-top`，向下移动一定的距离； 4. 给 `dt` 设置粗体字，强调标题； 5. 给 `dd` 清除默认的 `margin-left`，让内容靠边显示。
通过以上的 CSS，`dl` 中的子元素 `dt` 和 `dd` 就被垂直排列了，并且 `dl` 整体向下移动了一定的距离。这样的布局通常用于展示一些信息列表，让用户更加明了地查看每个条目的信息。