具有多个 dd 元素到 1 个 dt 元素的内联定义列表

编程问答 2022-04-27

问题描述

在这个主题上做了一些谷歌搜索和 Stackoverflowing，但我还没有找到我正在寻找的东西。我希望使用 CSS 来设置一个定义列表的样式，该列表具有多个 dd 元素的内联样式。我的意思是我需要这个：

DT first deFinition term:         DD term 1-1 // DD term 1-2 // DD term 1-3
DT second deFinition term:        DD term 2-1
DT third deFinition term:         DD term 3-1 // DD term 3-2 // DD term 3-3 // DD term 3-4 // DD
                                  term 3-5
.
.
DT twenty-first deFinition term:  DD term 21-1 // DD term 21-2

我只能找到 DT 与 DD 一对一配对的示例，但没有任何可以内联显示多个 DD 元素的示例。

（注意上面的第三个列表，当有新行时，项目总是缩进彼此齐平。）

有人知道怎么做吗？谢谢！

编辑

我得到的例子：

enter image description here

红色圈出的项目是“从作者那里购买”(dt) 及其 dd 元素。蓝色的是“买书”(dt) 及其 dd 元素。你可以看到它们是如何混合在一起的。

对于红色圆圈的 DD 元素，我应用了 display: inline-block; 和 margin: 0;（没有边距设置，有一个巨大的缩进）。

对不起，我只能附上一张照片。代码和 CSS 位于沙盒站点中，如果没有用户名/密码凭据，您将无法访问该站点。

解决方法

使 <dd> 内联块和 <dt> 元素内联。默认情况下，它们是块元素。现在通过 <dt>

上的伪元素插入换行符 

dt {
  display: inline;
  margin-right:20px;
}

dt::before {
  content: "\A";
  white-space: pre;
 
}

dd {
  display: inline;
  margin:0;
}
  <dl>
    <dt>Buy from author::</dt>
    <dd>Black hot drink</dd>
    <dd>//White cold drink</dd>
    <dd>//White cold drink</dd>
    <dd>//Black hot drink</dd>
    <dd>//White cold drink</dd>
    <dd>//White cold drink</dd>
    <dd>//Black hot drink</dd>
    
    <dt>Milk:</dt>
    <dd>White cold drink</dd>
    <dt>Coffee:</dt>
    <dd>Black hot drink</dd>
    <dd>//White cold drink</dd>
    <dd>//White cold drink</dd>
    <dt>Milk:</dt>
    <dd>White cold drink</dd>
    <dd>//White cold drink</dd>
  </dl>

htmlinline-styles