html – 如果元素的内容为空,为什么标签和数据的显示不使用twit

发布时间：2020-12-14 23:18:12 所属栏目：资源来源：网络整理

导读：我看到了描述列表的意外行为.标签. 我正在使用twitter bootstrap 2并使用此示例代码：一切正常,我看到了： 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 descriptio

我看到了描述列表< dl>的意外行为.标签.

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


……一切正常,我看到了：

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  

使用此代码：


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

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：主题模型
如果数据元素为空,则显示的输出与标签不匹配.这很不幸,因为主题选项非常有用.
我可以通过修改主题输出来部分“解决问题”,如下所示：


…但我看到“-blank-”显示空白元素.如果我使用像包含空格的字符串之类的东西,比如“”,我仍然会看到相同的标签描述错位问题.
请尝试将您的答案集中在描述哪个实体HTML5< dl>标签,引导程序或我的理解,在这里是目标,为什么.
非常感谢！
-编辑-
对于那些使用bootstrap的人来说,使用像这样的css工作正常：

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


最佳答案
默认情况下< dt>和< dd>是块级元素,不需要以任何方式“对齐”它们,它们自然地一个接一个地显示.
然而,Bootstrap的.dl-horizo??ntal并排排列这些元素.当其中一个< dd>没有内容,它已经崩溃,而其他人则向上移动. (这显然是你不想要的.)这种行为可以像这样“修复”：

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

但我不会将此引用为Bootstrap中的错误.为什么你想要一个没有定义的定义术语？不要显示这个词对我来说更有意义.
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!