Question

我目前正在使用描述列表，以便在下面提供标题和子术语。我使用CSS columns属性将其分为三列。

目前，这导致该列表在dt元素下方的dd元素列表中途中断。是否有CSS解决方案来停止dd之间的中断，以便每一列始终以dt开头？

我不喜欢使用dt，使用ul或其他元素的解决方案会很好。

<div id="pqr_list">
    <dl id="pqr_dl">
        <dt>TERM-A</dt>
        <dd>Item 1</dd>
        <dd>Item 2</dd>
        <dd>Item 3</dd>
        <dt>TERM-B</dt>
        <dd>Item 1</dd>
        <dd>Item 2</dd>
        <dt>TERM-C</dt>
        <dd>Item 1</dd>
        <dd>Item 2</dd>
        <dd>Item 3</dd>
        <dd>Item 4</dd>
        <dd>Item 5</dd>
        <dd>Item 6</dd>
        <dd>Item 7</dd>
        <dt>TERM-D</dt>
        <dd>Item 1</dd>
        <dd>Item 2</dd>
        <dd>Item 3</dd>
        <dd>Item 4</dd>        
    </dl>
</div>

我应该添加，我已经尝试过

dd {
  break-before: avoid;
}

Answer 1

使用div封装dl的新允许方法的示例。在这里使用网格，但还有其他选择。无论如何，很多框架都使用自定义元素，而且我认为在“ 错误”位置使用div时，您不会受到惩罚。

在MDN部分允许的内容中了解更多信息。

dl>div {
  display: grid;
  border-top: 1px solid #ddd;
  padding-top: .25em;
  padding-bottom: .25em;
  grid-gap: 1em;
  grid-template-columns: minmax(100px, 20%) auto;
}

dl>div:last-child {
  border-bottom: 1px solid #ddd;
}

dt {}

dd {
  margin: 0;
  grid-column: 2;
}

<dl>
  <div>
    <dt>Parent company</dt>
    <dd>Air France-KLM Group</dd>
  </div>
  <div>
    <dt>Alliance</dt>
    <dd>Sky Team</dd>
  </div>
  <div>
    <dt>Hubs</dt>
    <dd>
      Amsterdam Airport Schiphol
    </dd>
  </div>
  <div>
    <dt>Similar</dt>
    <dd>Demo 1</dd>
    <dd>Demo 2</dd>
    <dd>Demo 3</dd>
  </div>
</dl>

只要意识到使用网格，您甚至不需要一直使用div。取决于您对html的控制程度。但是当您还不能在项目中使用网格时，它仍然很有用。

Answer 2

定义列表通常很难处理，因为它们不允许将术语及其项组合在一起。（我认为使用HTML5进行了暂时的讨论，为此目的引入了一个额外的元素，但是最终还是再次放弃了这个想法。）

因此，如果没有必要使用定义列表，我建议您选择其他结构，其中dt和dd可以分组在一起，然后尝试使用{ {1}}在分组元素上。

多个CSS列DL不间断

2 个答案: