Per*_*ich 5 html layout html5 ruby-on-rails-3 twitter-bootstrap
我看到描述列表<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>与<dd>预期标签不匹配的行动.
阅读w3.org工作草案http://www.w3.org/TR/html-markup/dl.html#dl
... 当我的内容为空白时,我不清楚浏览器或程序员是否负责匹配<dt>和<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-对于使用bootstrap的人来说,使用像这样的css工作正常:
dt, dd {
line-height: 20px;
/* Keep this the same as line-height */
min-height: 20px;
}
默认情况下<dt>,<dd>它们是块级元素,不需要以任何方式"对齐"它们,它们会自然地一个接一个地显示.
.dl-horizontal然而,Bootstrap 将这些元素并排排列.当其中一个<dd>没有内容时,它会崩溃而其他内容会向上移动.(这显然是你不想要的.)这种行为可以像这样"修复":
dd {
/* should be the same as line-height */
min-height: 20px;
}
但我不会将此引用为Bootstrap中的错误.为什么你想要一个没有定义的定义术语？不要显示这个词对我来说更有意义.
| 归档时间： |
|
| 查看次数： |
4221 次 |
| 最近记录： |