說明列表使術語動態寬度，說明靜態寬度

我正在創建一個說明列表。我希望條款和說明水平排列。此外，我希望該術語具有動態寬度，但描述爲靜態寬度。說明列表使術語動態寬度，說明靜態寬度

我想要什麼來實現的：

這裏是一個的jsfiddle入手： https://jsfiddle.net/n14bobma/

<dl> 
    <dt>term 1</dt> 
    <dd>desciption 1</dd> 

    <dt>term 2</dt> 
    <dd>desciption 2</dd> 

    <dt>term 3</dt> 
    <dd>desciption 3</dd> 
</dl>

來源

2015-10-13 Niek Nijland

只有當你在標記中包裝每一對，或使用JS我認爲。 – Stickers

使用表格將描述與較大的術語對齊。你的結構將接近你所擁有的。 – fbiazi

和: 標籤，根據W3C：http://www.w3.org/TR/html-markup/dl.html#dl。所以包裝每對不會是一種選擇。 –

我終於從一個描述列表改爲表。然而，當dl可以是他父母的全部寬度時，我們找到了一個解決方案，當您在頁面上對齊列表時（這是我們的情況）。看到這個的jsfiddle：https://jsfiddle.net/n14bobma/1/

這是我們所使用的CSS：

dt, dd { 
    display: inline-block; 

    text-align: right; 
} 

dt {width: calc(100% - 100px);} 
dd {width: 100px;}

我們使用CSS鈣做出的動態與<dt>的。對於IE8和較舊的Android瀏覽器，您可以使用百分比編寫某種回退。

來源

2015-10-14 10:30:15

說明列表使術語動態寬度，說明靜態寬度

回答

相關問題