<dt>内容长于</dt> <dd>内容</dd>

Question

使用Bootstrap的dl-horizontal使dt和dd内容显示在同一行，我遇到以下问题，因为我的dt内容在某些情况下长于我的dd内容dt内容。 dt { width: 160px; } 的宽度有限。

<dl class="dl-horizontal">
    <dt>Very long dt content (like really long):</dt>
    <dd>
      short
    </dd>
    <dt>Very long dt content (like really long):</dt>
    <dd>
      short
    </dd>
</dl>

dd

这呈现如下：

所以第二个{{1}}内容显示在错误的行中。

Answer 1

上面的代码中似乎存在一些语法错误，出现了无关的关闭</dt>。基本上你只需要使用<dt>

的宽度

Corrrected语法：

<dl class="dl-horizontal">
  <dt>Very long dt content (like really long):</dt>
  <dd>short</dd>
  <dt>Very long dt content (like really long):</dt>
  <dd>short</dd>
</dl>

和CSS：

.dl-horizontal dt {
  clear: left;
  float: left;
  width: 60%;
}

http://jsfiddle.net/Z3Kh4/2/