Html 使用CSS对dl/dt/dd和ul/ol/li元素重新排序

我有一个HTML格式的翻译列表。目前，暂时的情况是

<div class="translations">
    <dl>
        <dd lang="en">house</dd>
        <dd lang="fr">maison</dd>
        <dd lang="de">Haus</dd>
    </dl>
    <dl>
        <dd lang="en">dog</dd>
        <dd lang="fr">chien</dd>
        <dd lang="de">Hund</dd>
    </dl>
</div>

除了装饰主要翻译外，我还想将其移动到列表顶部的

dl

中，例如，上面的内容应该呈现为已经编写好的内容

<dl>
    <dd lang="fr">maison</dd>
    <dd lang="en">house</dd>
    <dd lang="de">Haus</dd>
</dl>

梅森
房子
豪斯

但纯粹使用CSS更改（无脚本）

---

这是可能的吗？

如果您确定所有的

都不会包装，那么您可以这样做：

dl {
  position: relative;
  padding-top: 20px; /* or whatever your line-height is */
}

dd[lang="fr"] {
  position: absolute;
  top: 0;
}

---

请参阅以获取一个实际示例。

是。诀窍是使用填充在每个

的顶部添加一些死区。然后，绝对地把你选择的物品放在最上面

下面是一个JSFIDLE：

您将需要的CSS：

.translations dl {
    position: relative;
    padding-top: 20px;
}
.translations dl dd[lang="fr"] {
    color:blue;
    position:absolute;
    top:0;
}

---

不幸的是，

y-index

不是真正的CSS属性。@Marcel:

top

和

bottom

用作“y-index”，但它们在这里没有帮助。斯普拉夫，如果你有可变的线高度和包装，没有可靠的方法可以做到这一点，你的答案是最接近你能得到的。我想知道你为什么要用CSS来做这件事，而不使用javascript？@Madmartigan:我在想更灵活的方法，比如

z-index

的工作方式，因此名称和所有内容都很相似。@Madmartigan，因为它不需要在web浏览器中呈现，而需要在没有javascript引擎的其他地方呈现。有点小技巧，但我想可以。有什么方法可以将20px表示为一个神奇的数字以外的东西吗？任何喜欢的东西都可以用jQuery轻松地完成。将正确的项目拉出并

prepend（）

将其放入

@spraff 20px将是

dd

的

行高

…如果行高由百分比决定？实际上，一些

dd

将包裹（它们是短语）@spraff说，没有JavaScriptLike@yunzen，就无法做到这一点，你将失去运气，然后与CSS单独。（我等了好几年，

float:top

才出现在浏览器上。）

.translations dl {
    position: relative;
    padding-top: 20px;
}
.translations dl dd[lang="fr"] {
    color:blue;
    position:absolute;
    top:0;
}