3

有一个定义列表，其中键值对应该在一行上。定义在术语之后开始，因此<dt>s 没有固定宽度。这实际上工作正常，使用浮动元素，我得到一些像这样的：

值：定义 1

值：定义 2

值：定义 3

问题是，<dd>-element 可能会变长，然后导致：

值：定义 1

价值：

定义 2 非常非常长。

值：定义 3

但我实际上想得到这个：

值：定义 1

值：定义 2

非常非常长。

值：定义 3

我无法理解它。也许有人有一个想法。

这是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;
}​
4

2 回答 2

2

您可以使用display: inline来完成您正在寻找的内容：

http://jsfiddle.net/unPdd/

于 2012-10-20T14:05:34.967 回答
0

定义列表工作 loke 数组：您的标题是一个单元格，您的定义在另一个单元格中。这就是为什么当它太长时你的整个定义移到下一行。

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

于 2012-10-20T12:36:13.650 回答