5

我看到描述列表<dl>标签出现意外行为。

我正在使用 twitter bootstrap 2 并使用此示例代码：

<!DOCTYPE html>
<dl class="dl-horizontal">
  <dt>Item1</strong></dt><dd>This is a description of Item1</dd>
  <dt>Item2</strong></dt><dd>This is a description of Item2</dd>
  <dt>Item3</strong></dt><dd>This is a description of Item3</dd>
  <dt>Item4</strong></dt><dd>This is a description of Item4</dd>
  <dt>Item5</strong></dt><dd>This is a description of Item5</dd>
</dl>

...一切都按预期工作，我看到了：

Item1 This is a description of Item1  
Item2 This is a description of Item2  
Item3 This is a description of Item3  
Item4 This is a description of Item4  
Item5 This is a description of Item5

使用此代码：

<!DOCTYPE html>
<dl class="dl-horizontal">
  <dt>Item1</strong></dt><dd>This is a description of Item1</dd>
  <dt>Item2</strong></dt><dd></dd>
  <dt>Item3</strong></dt><dd>This is a description of Item3</dd>
  <dt>Item4</strong></dt><dd>This is a description of Item4</dd>
  <dt>Item5</strong></dt><dd>This is a description of Item5</dd>
</dl>

我看到这个有问题的显示：

Item1 This is a description of Item1
Item2 This is a description of Item3
Item3 This is a description of Item4
Item4 This is a description of Item5 
Item5

并且<dt>and<dd>标记没有按预期匹配。

在此处阅读 w3.org 工作草案http://www.w3.org/TR/html-markup/dl.html#dl

...当内容为空白时，我不清楚浏览器或程序员是否负责匹配<dt>and<dd>元素。<dd>

我在 Firefox 和 Safari 中测试了上面的代码，并看到了相同的输出。

这是一个意见问题，twitter bootstrap 2 中的一个错误，还是我误解了 HTML5 描述列表的使用？这种用法<dl>出现在 show.html.erb 自动生成的代码中

rake g bootstrap:themed model

如果数据元素为空白，则显示的输出与标签不匹配。不幸的是，否则主题选项非常有用。

我可以通过将主题输出修改为如下所示来部分“解决问题”：

<dt><strong><%= model_class.human_attribute_name(:name) %>:</strong></dt>
<dd><%= @server.name %> <%= "-blank-" if @server.name.blank? %> </dd>

...但我看到“-blank-”来显示空白元素。如果我使用包含空格的字符串，例如“”，我仍然会看到相同的标签描述错位问题。

请尝试将您的答案集中在描述哪个实体、HTML5<dl>标记、引导程序或我的理解在此处偏离目标以及原因。

非常感谢！

-EDIT- 对于那些使用引导程序的人，使用这样的 css 可以正常工作：

dt, dd {
  line-height: 20px;
  /* Keep this the same as line-height */
  min-height: 20px;
 }
4

3 回答 3

7

默认情况下<dt>，并且<dd>是块级元素，不需要以任何方式“对齐”它们，它们自然会一个接一个地显示出来。

然而， Bootstrap.dl-horizontal将这些元素并排排列。当其中一个<dd>没有内容时，它会折叠起来，而其他的则会向上移动。（这显然是你不想要的。）这种行为可以像这样“修复”：

dd {
  /* should be the same as line-height */
  min-height: 20px;
}

但我不会将此称为 Bootstrap 中的错误。为什么你想要一个没有定义的定义项？根本不显示这个词对我来说更有意义。

于 2012-10-14T15:55:16.980 回答
4

另一种解决方案可能是这个：

.dl-horizontal > dd:after {
  display: table;
  content: "";
  clear: both;
}
于 2013-05-31T08:59:10.510 回答
0

覆盖 dt 和 dd 的宽度并设置最小高度将解决 dt 和 dd 的空内容或长内容的问题。

.dl-horizontal > dt {
  width: 51% !important;
}

.dl-horizontal > dd {
  width: 49% !important;
}

dt, dd {
  line-height: 20px;
  min-height: 20px; /* must be line-height, to allocate height for empty elements */
}
于 2015-07-09T08:43:47.913 回答