有没有办法在没有包装器的情况下防止两个元素（dt 和 dd）之间的换行？

Question

它用于定义列表，仅允许dt和dd标签。dt将 a及其关联内容包装dd在 a 内部是无效的div。定义列表示例：

<dl>
    <dt>Name:</dt>
    <dd>Nick</dd>
    <dt>Age:</dt>
    <dd>26</dd>
    <!-- etc -->
</dl>

我希望dt和dd标签成为换行的内联块。dt/dd我想在一行上允许最多两对，但我不想让它在dt标签后面换行。换句话说，我从不希望“Name”和“Nick”位于不同的行上。我也不希望“年龄”和“26”出现在不同的行上。也许所有四个都在一行上，或者“Name”和“Nick”可能在一行上，“Age”和“26”在下一行上，具体取决于视口宽度。

我尝试将 元素放在元素之间，但这没有用。我无法将 dt 与其关联的 dd 包装在一起，因为从技术上讲，这是无效的标记。

这个问题有没有正确的解决办法呢？或者我是否必须放弃语义原则才能获得我想要的样式？

编辑：这不是How to style dt and dd so they are on a line?的重复项 因为我说“我想在一行上允许最多两个 dt/dd 对”。是一对还是两对取决于可变内容。

Answer 1

您可以像这样创建dt并dd inline模拟换行符:after dd

dt {
  display: inline;
  font-weight: bold;
}

dd {
  display: inline;
}

dd:after {
  content: "\a";
  white-space: pre;
}

<dl>
    <dt>Name:</dt>
    <dd>Nick</dd>
    <dt>Age:</dt>
    <dd>26</dd>
</dl>