html - 我怎样才能像表格一样设置定义列表的样式？

Question

我正在尝试创建一个 <dl>它具有 2 列表的外观，但在正确设置样式时遇到了一些问题，希望得到一些反馈!

这是我想要完成的模型:

这是一个codepen到目前为止我的尝试。

我的标记是标准的 <dl>哪里可以有多个 <dt> s 表示 <dd>或多个 <dd>用于 <dt> .

<dl class="b-references">
  <dt class="b-references__term">Director</dt>
    <dd class="b-references__item">Edgar Wright</dd>
  <dt class="b-references__term">Cast</dt>
    <dd class="b-references__item">Ansel Elgort</dd>
    <dd class="b-references__item">Lily James</dd>
    <dd class="b-references__item">Jon Hamm</dd>
    <dd class="b-references__item">Jamie Foxx</dd>
    <dd class="b-references__item">Kevin Spacy</dd>
    <dd class="b-references__item">Elza Gonzalez</dd>
    <dd class="b-references__item">Jon Bernthal</dd>
</dl>

这是我对样式 (SCSS) 所能获得的最接近的结果:

.b-references {
  border: 1px solid color(neutral, light);
  overflow: auto;
  position: relative;

  &__term {
    clear: both;
    float: left;
    display: inline-block;
    font-weight: font-weight(bold);
    padding: 1rem;
    min-width: 16rem;
    border-right: 1px solid color(neutral, light);

    &:not(:first-child):after {
      content: '';
      position: absolute;
      top: 1rem;
      left: 0;
      right: 0;
      border-top: 1px solid color(neutral, light);
    }
  }

  &__item {
    float: left;
    padding: 1rem 0;

    &:after {
      content: ',';
      margin-right: .25rem;
    }

    .b-references__term + & {
      content: '';
    }

    dt + & {
      padding-left: 1rem;
    }
  }
}

虽然这种方法存在一些问题:

1. 如果一组的<dd>超过给定的宽度，它们会跳到下一行并落在 <dt> 下不是另一个<dd>的。
2. 我想不出从最后一个 <dd> 中删除逗号的方法在每组中。我无法通过检查它是否后跟 <dt> 来定位它.
3. 如果有多个<dt>是一组，我不确定如何定义样式，因此所有样式都像模型一样在同一个“单元格”中以逗号分隔。

我假设许多解决方案只涉及使用表格，但从语义上讲，dl 更有意义，所以如果可以的话，我想尝试让它发挥作用。非常感谢任何帮助!

.b-references {
  border: 1px solid color(neutral, light);
  overflow: auto;
  position: relative;
}

.b-references__term {
  clear: both;
  float: left;
  display: inline-block;
  font-weight: font-weight(bold);
  padding: 1rem;
  min-width: 16rem;
  border-right: 1px solid color(neutral, light);
}

.b-references__term:not(:first-child):after {
  content: '';
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  border-top: 1px solid color(neutral, light);
}

.b-references__item {
  float: left;
  padding: 1rem 0;
}

.b-references__item:after {
  content: ',';
  margin-right: .25rem;
}

.b-references__term+.b-references__item {
  content: '';
}

dt+.b-references__item {
  padding-left: 1rem;
}

<dl class="b-references">
  <dt class="b-references__term">Director</dt>
  <dd class="b-references__item">Edgar Wright</dd>
  <dt class="b-references__term">Cast</dt>
  <dd class="b-references__item">Ansel Elgort</dd>
  <dd class="b-references__item">Lily James</dd>
  <dd class="b-references__item">Jon Hamm</dd>
  <dd class="b-references__item">Jamie Foxx</dd>
  <dd class="b-references__item">Kevin Spacy</dd>
  <dd class="b-references__item">Elza Gonzalez</dd>
  <dd class="b-references__item">Jon Bernthal</dd>
</dl>

Answer 1

如果您能够使用 CSS3 网格，这里有一个答案。

唯一需要的是成对的 <dt> & <dd> , 并在 <dd> 内嵌套元素进入另一个列表。

通过这种方法，您可以自由地设置独立于 <dl> 的导演/ Actor 列表的样式。 .
在这里，我使用 CSS 使其看起来像一堆逗号分隔的名称。

.b-references {
  border: 1px solid lightgray;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.b-references__term,
.b-references__item {
  border-bottom: 1px solid lightgray;
  padding: 20px;
}

.b-references__term:last-of-type,
.b-references__item:last-of-type {
  border-bottom: none;
}

.b-references__term {
  font-weight: bold;
}

.b-references__item {
  border-left: 1px solid lightgray;
  margin-left: 0;
}

.comma-separated-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comma-separated-list>li {
  display: inline;
}

.comma-separated-list>li::after {
  content: ", ";
}

.comma-separated-list>li:last-of-type::after {
  content: "";
}

<dl class="b-references">
  <dt class="b-references__term">
    <ul class="comma-separated-list">
      <li>Director</li>
      <li>Writer</li>
    </ul>
  </dt>
  <dd class="b-references__item">
    <ul class="comma-separated-list">
      <li>Edgar Wright</li>
    </ul>
  </dd>
  <dt class="b-references__term">
    <ul class="comma-separated-list">
      <li>Cast</li>
    </ul>
  </dt>
  <dd class="b-references__item">
    <ul class="comma-separated-list">
      <li>Ansel Elgort</li>
      <li>Lily James</li>
      <li>Jon Hamm</li>
      <li>Jamie Foxx</li>
      <li>Kevin Spacy</li>
      <li>Elza Gonzalez</li>
      <li>Jon Bernthal</li>
    </ul>
  </dd>
</dl>

编辑:将 dt 内容也包装到一个列表中，并为逗号分隔列表添加了一个特殊的列表类。