DL 元素，其中 DT / DD 在一行中的列宽相等

Question

因此，出于特定原因，我正在尝试使用 dl (Description List) html 元素。我希望元素内容显示每个 dt 和 dd 在他们自己的行上，我是这样完成的..

div {
  padding: 1rem;
  color: #fff;
  background-color: rgba(0,0,0,.8);
}
  
dl dt, dl dd {
  display: inline;
  line-height: 1.75rem;
}

<div>
  <h3>Cryptids of Cornwall:</h3>
  <dl>
      <dt>Beast of Bodmin</dt>
      <dd>A large feline inhabiting Bodmin Moor.<br></dd>

      <dt>Morgawr</dt>
      <dd>A sea serpent.<br></dd>

      <dt>Owlman</dt>
      <dd>A giant owl-like creature.<br></dd>
  </dl>
</div>

这真的很接近我所追求的，但我想知道是否有人知道使用 Flex 或 Grid 来实现更统一的布局，例如 table，同时仍然使用 dl 元素所以输出更像这样...

table {
  border-collapse: collapse;
  color: #fff;
  background-color: rgba(0,0,0,.8);
}

table th {
  text-align: left;
  padding-left: 1rem;
}

table td {
  padding: 1rem;
}

table tr td:first-of-type {
  text-align: right;
  border-right: lightgray 1px solid;
}

<table>
  <tr>
    <th colspan="2">
      <h3>Cryptids of Cornwall:</h3>
    </th>
  </tr>
  <tr>
      <td>Beast of Bodmin</td>
      <td>A large feline inhabiting Bodmin Moor.</td>
  </tr>
  <tr>
      <td>Morgawr</td>
      <td>A sea serpent.</td>
  </tr>
  <tr>
      <td>Owlman</td>
      <td>A giant owl-like creature.</td>
  </tr>
</table>

有没有办法通过 css 并显式使用 dl 元素来完成此操作？我已经在父级 dl 上尝试了 display: table 与 dt 和 dd 作为 display: table-cell 但后来我似乎无法将其分成新行在 dd 以及使用 flex 和 css 网格的失败尝试之后，想知道是否有人知道教的窍门？谢谢！

Answer 1

这是一个 quick-and-dirty display: grid; 实现：

~~垂直轨道（“列”）是 1fr 1fr，所以它们都是 50% 宽。我不确定制作音轨的最佳方法 sized-to-content。~~
- 我最终通过 grid-template-columns: auto auto; 完成了这项工作，呸！
~~垂直轨道之间没有白色边框。~~
- 我确实尝试通过使用 dl::before 来破解它（使用 border: 1px solid white 使它变得 1px 宽，但是 it seems like it's currently impossible 使网格项目跨度所有个水平轨道，当有隐式轨道时。
- 更新：在受到启发之后，我能够通过使用 absolutely-positioned ::after 元素（在<dt> 所以它有正确的水平位置，没有明确的 left 或 right 值）。
令我惊讶的是，当 <dt> 元素有多个 <dd> 兄弟元素时，它实际上工作得很好（我已经为 Zennor 的美人鱼 为例）。我最初担心多个 <dd> 元素会破坏布局。
顺便说一句，您的 HTML 不需要 <br /> 中断。我在下面的示例中删除了它们。

div {
  padding: 1rem;
  color: #fff;
  background-color: #333;
}
  
dl, dt, dd {
  margin: 0;
  padding: 0;
}
  
dl {
  color: #eee;
  background-color: #666;
  border-radius: 5px;
  padding: 1rem;
  
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-columns: auto auto;
  grid-template-columns: auto 5px auto;
  grid-template-rows: auto [last-line];
  grid-auto-rows: min-content;
  
  grid-gap: 1rem;
  
  /* This is to allow the `dl > dt:first-child::after` to fill the height */
  position: relative;
}

/* Using this to make a vertical line won't work, see 
dl::before {
  content: '';
  display: block;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: -1;
  grid-row-end: last-line;
  
  background-color: red;
  border-left: 1px solid white;
  width: 1px;
}
*/

dl > dt:first-child::after {
  content: '';
  display: inline;
  border-left: 1px solid white;
  width: 1px;
  
  position: absolute;
  top: 0;
  bottom: 0;
  /* Offset it to the right a bit using margin: */
  margin-left: 1rem;
}

dl > dt {
  grid-column-start: 1;
  grid-column-end: 2;

  /*
  `align-self` is for vertical alignment in a grid cell.
  `justify-self` is for horizontal alignment in a grid cell.
  */

  align-self: center; 
  justify-self: end; /* i.e. right-align */
  text-align: right; /* This is needed so narrow-viewports don't break. */
}
dl > dd {
  grid-column-start: 2;
  grid-column-end: 3;
  
  grid-column-start: 3;
  grid-column-end: 4;

  align-self: center; 
  justify-self: start; /* i.e. left-align */
}

<div>
  <h3>Cryptids of Cornwall:</h3>
  <dl>
      
      <dt>Beast of Bodmin</dt>
      <dd>A large feline inhabiting Bodmin Moor.</dd>

      <dt>Morgawr</dt>
      <dd>A sea serpent.</dd>

      <dt>Mermaid of Zennor</dt>
      <dd>A popular Cornish folk tale</dd>
      <dd>The parishioners at St. Senara's commemorated the story by having one end of a bench carved in the shape of a mermaid</dd>

      <dt>Owlman</dt>
      <dd>A giant owl-like creature.</dd>

      
  </dl>
</div>

截图证明：

它在各种视口尺寸下看起来都不错：

非常狭窄：

正常

很宽

Answer 2

I've tried things display: table on the parent dl with the dt and dd as display: table-cell but then I can't seem to break the into new rows after the dd along with failed attempts at using flex and css grid so wondering if someone knows a trick to teach?

Table 单元格需要 table 行，table 行需要 table（技术上是 tbody、thead 或 tfoot）。最初我认为 <dl>、<dt> 和 <dd> 不适合配置成 table/grid 布局，因为 <dl> 是唯一的 parent元素，甚至 <dt> 也不允许有 <dt> 和 <dd> 作为 children。然后我发现 <div> is valid if a direct descendant of a <dl> 这是成为 table 行的最佳位置。

如果您想要 table 行为，请分配 display table type values:

Element	Property	Value	Hierarchy
`<dl>`	`display`	`table`
`<dt>`	`display`	`table-caption`	`dl > dt`
`<div>`^❉	`display`	`table-row`	`dl > div`
`<dt>`	`diaplay`	`table-cell`	`dl > div > dt`
`<dd>`	`display`	`table-cell`	`dl > div > dd`

^{^❉一个 <div> 可以是一个 <dl> 和一个 parent 共 <dt> 和 <dd>}

多年来一直不鼓励使用 <table> 和 table 组件元素进行布局，但不鼓励使用 display: table 和相关值。

html {
  font: 2ch/1.75 'Garamond'
}

main {
  padding: 1rem;
  color: #fff;
  background-color: rgba(0, 0, 0, .8);
}

dl {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  width: 80%;
}

dl>dt {
  display: table-caption;
  width: 100%;
  margin-bottom: 5px;
  padding: 0;
  border: 0;
  font-size: 1.17rem;
  font-weight: 900;
}

dl>div {
  display: table-row;
}

dl>div:first-of-type>dt {
  width: 50%;
}

dl>div:first-of-type>dd {
  width: 50%;
}

div>dt,
div>dd {
  display: table-cell;
}

div>dt {
  padding-right: 10px;
  border-right: 2px solid #fff;
  text-align: right;
}

div>dd {
  padding-left: 10px;
  border-left: 2px solid #fff;
}

<main>
  <dl>
    <dt>Cryptids of Cornwall:</dt>
    <div>
      <dt>Beast of Bodmin</dt>
      <dd>A large feline inhabiting Bodmin Moor.</dd>
    </div>
    <div>
      <dt>Morgawr</dt>
      <dd>A sea serpent.</dd>
    </div>
    <div>
      <dt>Owlman</dt>
      <dd>A giant owl-like creature.</dd>
    </div>
  </dl>
</main>

DL 元素，其中 DT / DD 在一行中的列宽相等

DL element with DT / DD as equal column widths on one row

html

css

wcag