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

mgdq6dx1 于 2023-05-23 发布在其他

关注(0)|答案(2)|浏览(195)

我有一个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>

现在，我可以指定一种语言作为主要语言，并使用CSS单独设计它，即：

.translations dl dd[lang="fr"] {
    color: blue;
}

除了装饰主翻译外，我还想将其移动到dl内的列表顶部。上述内容应呈现为如同其已被写入

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

但是纯粹使用CSS更改（没有脚本）。
这可能吗？

css

来源：https://stackoverflow.com/questions/9225466/reorder-dl-dt-dd-and-ul-ol-li-elements-using-css

2条答案

按热度按时间

vwhgwdsa1#

是的。诀窍是使用填充在每个<dl>的顶部添加一些死空间。然后，绝对位置您选择的项目到顶部。
下面是一个jsFiddle：http://jsfiddle.net/2Wy8m/
你需要的CSS：

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

赞(0）回复(0）举报 2023-05-23

ca1c2owp2#

如果你确定没有<dd>会换行，那么你可以这样做：

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

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

参见this fiddle以获得一个实时示例。

赞(0）回复(0）举报 2023-05-23

我来回答

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

2条答案

相关问题

热门标签

最新问答