使用浮動子元素設計定義列表（<dl>）

Question

有一個定義列表，其中鍵 - 值對應該在一行上。定義在該術語之後開始，因此<dt> s沒有固定的寬度。這實際上工作得很好，利用浮動元素，我也得到了一些」類似這樣的：

值：定義1

值：定義2

值：定義3

問題是，<dd> -element可能會變長然後它會導致這樣的：

值：定義1

值：

確定指標2是非常非常長。

值：定義3

但我想真正得到這樣的：

值：定義1

值：確定指標2

一世很長。

值：定義3

我不能讓我的頭周圍。也許有人有一個想法。

這裏有一個demo on jsfiddle.net這裏來源：

HTML

<dl> 
    <dt>Value 1:</dt> 
    <dd>Defintiion 1</dd> 

    <dt>V 2:</dt> 
    <dd>Defintiion 2</dd> 

    <dt>Value 3</dt> 
    <dd>Defintiion 3 is pretty long. So it breaks into a new line.</dd> 

    <dt>This length is not defined:</dt> 
    <dd>Defintiion 4</dd> 

    <dt>Last</dt> 
    <dd>Defintiion 5</dd> 
</dl>​ 

CSS

dl { 
    width: 200px; 
    border: 1px solid red; 
} 

dl > dt { 
    display: block; 
    float: left; 
    clear: both; 
    margin: 0; 
    padding: 0 5px 0 0; 
    font-weight: bold; 
} 

dl > dd { 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0; 
}​ 

Answer 1

您可以使用display: inline來完成你在找什麼：

http://jsfiddle.net/unPdd/

Answer 2

定義列表工作魔神陣列：你的標題是一個小區，你的定義在另一個單元格中。這就是爲什麼當你的整個定義太長時，它會移到下一行。

您正在尋找的行爲看起來更像一個普通列表，其中每個標題都用粗體字書寫。