如何解决 Semantic-ui 的无效 header 标记？

Question

Semantic-ui 的 header 组件示例将 div 标记放在 h2 标记内，这是无效标记。

将外部 h2 更改为 div 是有效的，但样式不再相同（它小得多）。

你如何处理这个标记？

<h2 class="ui header">
  <i class="settings icon"></i>
  <div class="content">
    Account Settings
    <div class="sub header">Manage your preferences</div>
  </div>
</h2>

（来自 http://semantic-ui.com/elements/header.html）

Answer 1

如果您想要实现的是让您的 header 在外观上与示例中的相同，但具有有效标记，您需要做的就是更改 h2 到 div 并指定大小（这将解决它小得多的问题）。 <h2 class="ui header"> 对应于 <div class="ui large header"> 因此有效代码为：

<div class="ui large header">
  <i class="settings icon"></i>
  <div class="content">
    Account Settings
    <div class="sub header">Manage your preferences</div>
  </div>
</div>

编辑： 我刚刚查看了 Semantic UI 的问题跟踪器并注意到 this one 解决了这个确切的问题（不确定您是否'打开它的人）。简而言之，在语义 UI 的未来版本中，以下内容应该具有相同的结果，但使用实际的 header 标签：

<h2 class="ui header">
  <i class="settings icon"></i>
  <span class="content">
    Account Settings
    <span class="sub header">Manage your preferences</span>
  </span>
</h2>

上面带有 div 标签的解决方案仍然有效，假设您不需要使用实际的 h2 标签。

如何解决 Semantic-ui 的无效 header 标记？

How to work around Semantic-ui's invalid header markup?

html

semantic-ui