html - 模拟 <h1> 中的嵌套 <img> 而无需实际嵌套

Question

我必须修复 h1 标签中包含 href 图像的页面，如下所示:

<h1>Header text <a href="example.com"><img src="image.png"></a></h1>

页面看起来很好。但是，在 h1 标签中添加链接对我的 SEO 不利，因此我需要将它们分开。问题是，当我将两者分开时:

<h1>Header text</h1><a href="example.com"><img src="image.png"></a>

它将 Logo 放在页眉下方，将所有其他容器向下推，完全破坏了页面布局。我想要做的是使用 CSS 让两个元素表现就像它们被嵌套一样，而实际上并不需要。

Answer 1

您可以使用 float:left; 或 display:inline-block; 到您的 h1 标签，这样图像和标题文本将在同一行:

h1 {
  float: left;/*prefer to use inline-block though*/
}

---

您可能还对以下结构感兴趣以进行更多 SEO 调整:

<hgroup>
  <h1>Header text</h1>
  <h1><a href="example.com"><img src="image.png"></a></h1>
</hgroup>