如何水平對齊HTML定義列表（<dl>）而不限制高度的術語或定義？

我想水平對齊一個HTML定義列表，所以這個詞在左邊，而定義在右邊。如何水平對齊HTML定義列表（<dl>）而不限制高度的術語或定義？

術語和定義都可以很長，所以它們可以比可用寬度更寬，並且會換行。

與我的CSS，我沒有問題的定義，包裝，因此比相應的術語更高。但是在極少數情況下，當術語換行並且高於相應的定義時，我沒有得到以下定義來正確清除。

你可以在我的jsFiddle中看到這個，其中定義「555」與術語「555」不正確對齊。

http://jsfiddle.net/jmuheim/kjf8f/

關於如何解決此問題的任何幫助真的讚賞。要求：

我想定義使用右側所有可用的水平空間，所以我不想爲<dd>標記使用固定寬度。
我不希望任何情況下的定義被定位在相應的術語下。

來源

2013-10-02 Joshua Muheim

既然你真的想以表格方式顯示定義的表格，改變'dl'到'table'標記是最好的選擇，如果你有控制超過標記。不幸的是，由於缺乏內部結構，顯然沒有辦法將'dl'作爲CSS中的表格。 –

這可能會訣竅。添加下面的CSS規則：

dd:after { 
    content: ''; 
    display: block; 
    clear: both; 
}

僞元素將清除浮動<dd>元素，這將確保在新行的下一個<dt>開始。

觀看演示：http://jsfiddle.net/audetwebdesign/TXYGk/

來源

2013-10-02 13:57:22

這是關於完美的，謝謝！我只需要從dt中刪除邊距。現在它是我想要的100％的方式。 http://jsfiddle.net/jmuheim/TXYGk/2/ –

我真的很喜歡馬克的回答。另一種解決方案，如果它不破壞您的設計要求，可能還會使DD浮起來，並且給出DD和DT（以及水平邊距）基於百分比的寬度而不是固定像素寬度：http://jsfiddle.net/dHRSz/1/

或考慮到根據內容的不同，一張表格（包括<th scope="row">中的條款）可能不太適合標記。

編輯 - 從複製的jsfiddle CSS：

body { 
    padding: 0; 
    margin: 0; 
} 

.block { 
    overflow: hidden; 
    margin: 20px 0; 
} 

dl { 
    margin: 10px 0; 
} 

dt { 
    margin: 0 0 4px 0; 
    float: left; 
    clear: left; 
    width: 28%; 
} 

dd { 
    float: left; 
    width: 71%; 
    margin: 0 0 4px 1%; 
}

來源

2013-10-02 14:05:02 RwwL

我知道使用百分比的可能性，但通常他們不是我的要求所說的。是的，標題和內容字段之間的關係爲1：1的表格可以，但我想定義列表更適合使用。不管怎麼說，還是要謝謝你！ –

如何水平對齊HTML定義列表（<dl>）而不限制高度的術語或定義？

回答

相關問題