文章/答案/技术大牛

发布

社区首页 >问答首页 >多个dd元素到1dt元素的内联定义列表

问多个dd元素到1dt元素的内联定义列表
EN

Stack Overflow用户

提问于 2021-07-05 22:01:59

回答 2查看 436关注 0票数 0

在这个问题上做了一些Googling和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之间有一对1的配对，但是没有什么可以内联显示多个DD元素。

(请注意，对于第三个列表，当有一个新的行时，项目总是缩进，互相刷新。)

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

编辑

我得到的例子：

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

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

对不起，我只能附上一张照片。代码和CSS位于一个沙箱站点中，没有用户名/密码页面就无法访问这些站点。

html

css

inline-styles

回答 2

Stack Overflow用户

发布于 2021-07-05 22:31:53

使<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>

票数 1

Stack Overflow用户

发布于 2022-02-03 05:02:33

您可以使用块，而不是使用原来的答案的变化换行。

dl,
dt,
dd {
  margin: 0;
  padding: 0;
}

dt,
dd {
  display: inline;
}

dt {
  font-weight: bold;
}

dt::before {
  content: '';
  display: block;
}

<dl>
  <dt>English</dt>
  <dd>coffee</dd>
  <dt>Dutch</dt>
  <dd>koffie</dd>
  <dt>Ottoman Turkish</dt>
  <dd>قهوه (kahve)</dd>
  <dt>Arabic</dt>
  <dd>قَهْوَة (qahwah)</dd>
  <dd>قَهِيَ (qahiya) [to lack hunger]</dd>
</dl>

如果您想要一个在两列中对齐的术语和定义的布局，正如一些评论所建议的那样，display: grid;似乎是最好的选择。在MDN和逐格上有大量的css网格资源。这是一个非常多用途的布局！

dl,
dt,
dd {
  margin: 0;
  padding: 0;
}

dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "language coffee";
}

dt {
  font-weight: bold;
  grid-column: language;
}

dd {
  grid-column: coffee;
}

<dl>
  <dt>English</dt>
  <dd>coffee</dd>
  <dt>Dutch</dt>
  <dd>koffie</dd>
  <dt>Ottoman Turkish</dt>
  <dd>قهوه (kahve)</dd>
  <dt>Arabic</dt>
  <dd>قَهْوَة (qahwah)</dd>
  <dd>قَهِيَ (qahiya) [to lack hunger]</dd>
</dl>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68262484

复制

相似问题

问多个dd元素到1dt元素的内联定义列表
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多个dd元素到1dt元素的内联定义列表EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多个dd元素到1dt元素的内联定义列表
EN