html - 在 <dt> 之前显示 <dd> 数据？

Question

因此，我尝试在 DL 中显示数据，其中动态 DD 数据列在 DT 之前。

示例:“3 票，6 条评论”与“3 票，6 条评论”。

<dl>
    <dt>Votes</dt>
    <dd>3</dd>
    <dt>Comments</dt>
    <dd>6</dd>
</dl>

DL 最具语义意义；但如果没有父子关系，我就无法使用 float 。

有办法让这个工作成功吗？或者有更好的语义解决方案吗？

Answer 1

就我自己而言，我会使用简单的列表，如下所示:

HTML

<ul>
  <li data-n="1">Vote</li>
  <li data-n="6">Comment</li>
</ul>

CSS

ul { list-style: none; }
ul,li { margin: 0; display: inline-block; }
li:before { content: attr(data-n) " "; }
li:not([data-n="1"]):after { content: "s"; }

Demo

我认为 DL 在这种情况下没有语义意义，因为它不是“投票”和“评论”术语的定义