Question

我正在尝试使用CSS正确显示定义列表，以便术语和定义是内联的，但是彼此之后的多个术语或定义将显示为块元素。所以

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
  <dt>Term</dt>
  <dd>Definition</dd>
  <dt>Term</dt>
  <dd>Definition</dd>
  <dd>Definition</dd>
</dl>

应显示为：

期限定义
期限定义
期限定义
定义

但由于某种原因，它没有排好队。如果我有如上所述的简单代码，它工作正常，但如果我在<dd>中包含任何块元素，它将失败并使所有内容成为块元素。我不想要这个。我正在使用这个CSS：

dl.inline dt, dl.inline dd {
    display: inline;
    float: left;
    margin: 0 0.5em 0 0;
}

dl.inline dd + dt, dl.inline dd + dd {
    clear: left;
}

我错过了什么让它表现出来？

Answer 1

这就是你要追求的吗？

http://jsfiddle.net/nLGar/1/

dl.inline dt, dl.inline dd {
    float: left;
    margin: 0 0.5em 0 0;
    background: #ccc
}
dl.inline dd + dt, dl.inline dd + dd {
    clear: left
}
dl.inline dd + dd {
    float: none
}
dl.inline dt {
    font-weight: bold
}

Answer 2

浮动元素自动显示为块元素并显示：忽略内联规则。

dl.inline dt, dl.inline dd {
    display: inline;
}
dl.inline dt {
    font-weight: bold;
}

如果要设置margin-right，可以使用display：inline-block

内联定义列表

2 个答案: