html - DT/DD 的 DL 元素在一行上具有相等的列宽

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 来实现更统一的布局，如表格，同时仍然使用 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

这是一个快速而肮脏的display: grid;实现:

• 垂直轨道(“列”)是 1fr 1fr ，所以它们的宽度都是 50%。我不确定使轨道大小适合内容的最佳方法。
  • 我最终通过简单地执行 grid-template-columns: auto auto; 来完成这项工作。 ，唷!
• 垂直轨道之间没有白色边框。
  • 我确实尝试使用 dl::before 来破解它(将 1px 设为 border: 1px solid white 但 it seems like it's currently impossible 宽，以便在存在隐式轨道时使网格项跨越所有水平轨道。
  • 更新:受到启发后by this post ，我能够通过使用绝对定位的::after来破解垂直线。元素(在 <dt> 中，因此它具有正确的水平位置，无需明确的 left 或 right 值)。
• 令我惊讶的是，当 <dt> 时，它确实实际上工作得很好。元素有多个 <dd> sibling (我为泽诺尔的美人鱼添加了一个作为示例)。我原本担心多个<dd>元素会破坏布局。
• 顺便说一句，您不需要 <br /> HTML 中出现中断。我已在下面的示例中删除了它们。

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 https://stackoverflow.com/questions/44052336/make-a-grid-item-span-to-the-last-row-column-in-implicit-grid
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>

---

截图证明:

它在各种视口(viewport)尺寸下看起来都不错:

非常窄:

正常

非常宽