使用CSS,我如何样式如下:
<dl>
<dt>Mercury</dt>
<dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
<dt>Venus</dt>
<dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
<dt>Earth</dt>
<dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>
dt的内容显示在一列,dd的内容显示在另一列,每个dt和对应的dd在同一行?即生产出看起来像这样的东西:
在我的例子中,我只是想在每个dd元素后面加一个换行符。
例如,我想这样做:
<dl class="p">
<dt>Created</dt> <dd><time>2021-02-03T14:23:43.073Z</time></dd>
<dt>Updated</dt> <dd><time>2021-02-03T14:44:15.929Z</time></dd>
</p>
就像这个的默认样式:
<p>
<span>Created</span> <time>2021-02-03T14:23:43.073Z</time><br>
<span>Updated</span> <time>2021-02-03T14:44:15.929Z</time>
</p>
就像这样:
2021 - 02 - 03 t14:23:43.073z创建
2021 - 02 - 03 t14:44:15.929z更新
为了做到这一点,我使用了下面的CSS:
dl.p > dt {
display: inline;
}
dl.p > dd {
display: inline;
margin: 0;
}
dl.p > dd::after {
content: "\A";
white-space: pre;
}
或者你可以使用这样的CSS:
dl.p > dt {
float: left;
margin-inline-end: 0.26em;
}
dl.p > dd {
margin: 0;
}
我还在每个dt元素后面添加了一个冒号:
dl.p > dt::after {
content: ":";
}
参见jsFiddle演示
我需要一份完全符合项目描述的列表,该列表展示了一家公司的员工,左边是他们的照片,右边是他们的信息。我设法在每个DD之后使用伪元素来完成清理:
.myList dd:after {
content: '';
display: table;
clear: both;
}
此外,我希望文本只显示在图像的右侧,而不是在浮动图像下进行包装(伪列效果)。这可以通过添加一个带有CSS overflow: hidden;DD标签的内容。您可以省略这个额外的DIV,但是DD标记的内容将被包装在浮动的DT下面。
在使用了一段时间后,我能够支持每个DD的多个DT元素,但不能支持每个DT的多个DD元素。我尝试添加另一个可选类,只在最后一个DD之后清除,但随后的DD元素包装在DT元素下(不是我想要的效果……我希望DT和DD元素形成列,而额外的DD元素太宽)。
根据所有的权利,这应该只能在IE8+中工作,但由于IE7中的一个怪癖,它也可以在那里工作。