帶內聯對的定義列表

我試圖創建一個定義列表的定義對，每對存在於一條單獨的行上。我試過讓dt s和dd s display:inline，但然後我失去了對之間的換行符。我如何確保每對有一條線（而不是每個單獨的術語/定義）？帶內聯對的定義列表

實施例：

<dl> 
<dt>Term 1</dt><dd>Def 1</dd> 
<dt>Term 2</dt><dd>Def 2</dd> 
</dl>

得到：

Term 1 Def 1 
Term 2 Def 2

製備它們的CSS內聯將是：

dt,dd{display:inline;}

得到：

Term 1 Def 1 Term 2 Def 2

......這不是我想要的（缺少對之間的換行符）。

來源

2013-12-19 krainert

請提供一個完整的，工作代碼示例，按照在FAQ問題的要求。 –

它是否需要比我在編輯中添加的更完整？ – krainert

請包含相關的CSS。 –

試試這個：

dt, dd { float: left } 
dt { clear:both }

添加邊距來dt dd如果你希望他們之間更多的空間..

來源

2013-12-19 22:06:23

這樣做。謝謝！ – krainert

這爲我打開了其他的東西，比如* p *，後面是* dl *，超過了* dl *。 – mlt

@mlt爲了避免你也需要'dl {overflow：hidden; }' – ChrisW

另一種解決方案：

dt:before { 
    content: ""; 
    display: block; 
} 
dt, dd { 
    display: inline; 
}

來源

2014-04-19 06:53:11

它工作的很好，但第二列沒有對齊。 – qub1n

這適用於新的瀏覽器，但不適用於Android 4.3或之前版本 – Ruskin

另一種解決方案是使用內嵌塊和百分比寬度。只要dd + dt的組合寬度大於50％。

dt, dd { 
    display: inline-block; 
} 

dt { 
    width: 50%; 
} 

dd { 
    min-width: 5%; 
}

我發現這給了我一個更一致的dd元素定位。

來源

2014-08-19 14:48:59 ReggieB

事實上，'dt' +'dd' +'dt'的組合寬度需要超過100％才能發揮作用。我最初嘗試使用25％的「dt」寬度和26％的「dd」最小寬度「，但它沒有達到預期的效果。 – Sandwich

如果你有一個「斑馬線」 backgronund或邊界分隔每個DT-DD對，那麼這將很好地工作：

dt, dd { padding: 8px 6px; display: block;

 } 
dt { 
    font-weight: 600; 
    float: left; 
    min-width: 50%; 
    margin: 0 8px 0 0; 
} 
dd:nth-of-type(odd) { 
    background: #eee; 
}

這就會出現包裹灰色背景在一排兩個項目。只要DT具有比DD更少的垂直高度 - 通常就是這種情況。

還沒有瀏覽器測試過。

來源

2015-01-15 17:12:22

我試過這些答案，最後我以this結束。

對此我簡化爲：

dl {  
    padding: 0.5em; 
    } 
    dt { 
    float: left; 
    clear: left; 
    width: 100px; 
    text-align: right; 
    font-weight: bold;  
    } 
    dt:after { 
    content: ":"; 
    } 
    dd { 
    margin: 0 0 0 110px;   
    }

來源

2015-08-07 15:21:31 qub1n

另一種簡單的解決方案

dt { 
    display: block; 
    float: left; 
    min-width: 100px; 
}

https://jsbin.com/vumeyowana/edit?html,css,output

來源

2016-09-20 15:00:45 Inclooder

最好的回答，恕我直言。我更喜歡'right-padding：1em;'over'min-width' –

安德烈Fedoseev的答案並不在舊的Android（股票瀏覽器4.3）工作。

這樣確實可以爲瀏覽器和其他所有我檢查：

dt::before { 
 
    content: "\A"; 
 
    white-space: pre-wrap; 
 
    display: block; 
 
    height: .5em; 
 
} 
 

 
dt, dd { 
 
    display: inline; 
 
    margin: 0; 
 
}

<dl> 
 
    <dt>AM</dt> 
 
    <dd>Description for am that should span more than one line at narrow screen widths.</dd> 
 
    <dt>PM</dt> 
 
    <dd>this means afternoon.</dd> 
 
</dl>

來源

2016-12-14 15:47:00 Ruskin

帶內聯對的定義列表

回答

相關問題