Question

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

价值：定义1

价值：定义2

价值：定义3

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

价值：定义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

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

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

使用浮动子元素</dl>为定义列表（<dl>）设置样式

2 个答案: