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

我有一個HTML格式的翻譯列表。目前，臨時，它的東西，像使用CSS重新排序dl/dt/dd和ul/ol/li元素

<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更改（無腳本）。

這可能嗎？

來源

2012-02-10 spraff

不幸的是'Y型index'是不是一個真正的CSS屬性。 – Marcel 2012-02-10 09:32:19

@Marcel：'top'和'bottom'作爲「y-index」，但他們在這裏沒有幫助。如果你有可變的線高和包裝，沒有可靠的方法來做到這一點，你所得到的答案是最接近的。我想知道你爲什麼試圖在CSS中這樣做，並避免JavaScript？ – 2012-02-10 10:02:52

@Madmartigan：我在思考'z-index'是如何工作的，因此我更加靈活，因此也就是類似的名字和全部。 – Marcel 2012-02-10 10:07:20

是的。訣竅是使用填充在每個<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; 
}

來源

2012-02-10 09:31:00 Interrobang

一點點黑客，但我想它會這樣做。有沒有什麼辦法可以將20px表示爲除幻數之外的其他東西？ – spraff 2012-02-10 09:34:02

使用jQuery可以更輕鬆地完成任何事情。拉出正確的物品並將其預加載（'）到'

'。 – Interrobang 2012-02-10 09:35:26

@spraff 20px將會是'dd'的'行高' – HerrSerker 2012-02-10 10:00:55

如果知道肯定的，那沒有<dd> S的撫慰，那麼你可以做這樣的事：

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

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

一個活生生的例子見this fiddle。

來源

2012-02-10 09:30:10 Boldewyn

實際上，一些'dd's會包裝（他們是短語） – spraff 2012-02-10 09:34:34

@spraff然後沒有JavaScript沒有辦法做到這一點 – HerrSerker 2012-02-10 10:01:41

就像@yunzen說的那樣，你會很失敗，然後只用CSS。（我正在等待多年的'float：top'來瀏覽器。） – Boldewyn 2012-02-10 10:51:13

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

回答

相關問題