如何使用flexbox在另一个下方有多个dd并排对齐dt和dd？

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试创建一个由键-值对组成的列表，其中键在左侧，值在右侧，另一个在下方。

Authors          John Doe
                 Jane Doe
                 Max Mustermann
Publishers       Johne Doe
                 Jane Doe
                 Max Mustermann

我的问题是如何在每个dd元素之间强制换行？我知道使用浮动元素会很容易，但是我想知道是否有可能仅使用flexbox实现。不幸的是，根据定义，我无法将dd元素包装在自己的容器中。

dl {
  display: flex;
}
dt {
  width: 33%;
}
dd {
  margin: 0;
}
<dl>
  <dt>Authors</dt>
  <dd>John Doe</dd>
  <dd>Jane Doe</dd>
  <dd>Max Mustermann</dd>
</dl>
<dl>
  <dt>Publishers</dt>
  <dd>John Doe</dd>
  <dd>Jane Doe</dd>
  <dd>Max Mustermann</dd>
</dl>

回答：

如何将设置flex-wrap为，dl并且将的宽度> 50％与dd 一起使用margin-left: auto？

请参见下面的演示：

dl {
  display: flex;
  flex-wrap: wrap;
}
dt {
  width: 33%;
}
dd {
  margin-left: auto;
  width: 66%;
}
<dl>
  <dt>Authors</dt>
  <dd>John Doe</dd>
  <dd>Jane Doe</dd>
  <dd>Max Mustermann</dd>
</dl>
<dl>
  <dt>Publishers</dt>
  <dd>John Doe</dd>
  <dd>Jane Doe</dd>
  <dd>Max Mustermann</dd>
</dl>

以上是 如何使用flexbox在另一个下方有多个dd并排对齐dt和dd？ 的全部内容， 来源链接： utcz.com/qa/415879.html

回到顶部