如何解决具有多个 dd 元素到 1 个 dt 元素的内联定义列表
在这个主题上做了一些谷歌搜索和 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 元素的示例。
(注意上面的第三个列表,当有新行时,项目总是缩进彼此齐平。)
有人知道怎么做吗?谢谢!
编辑
我得到的例子:
红色圈出的项目是“从作者那里购买”(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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。