使用浮动子元素设计定义列表（<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

定义列表工作魔神阵列：你的标题是一个小区，你的定义在另一个单元格中。这就是为什么当你的整个定义太长时，它会移到下一行。

您正在寻找的行为看起来更像一个普通列表，其中每个标题都用粗体字书写。