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

Question

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

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

页面看起来很好。但是，在 h1 标签中使用 link 会对我的 SEO 造成不良影响，因此我需要将它们分开。问题是，当我将两者分开时：

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

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

Answer 1

您可以在 h1 标签中使用 float:left; 或 display:inline-block;，这样图像和 header 文本就会在同一行：

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>

Answer 2

Bhojendra Nepal 的答案很好，或者您可以将它们分成两个 div，右边 div 和左边 div

这里的例子我有中心，右，左：

#wrapper {
  margin-right: 200px;
  background-color: transparent;
  background-image:
    linear-gradient(
      to right, 
      lightblue, blue, lightblue, #0008ED, lightblue
    );
  border-radius: 15px 15px 15px 15px;
  
}

#left {
  float: left;
  width: 30%;
  height: 70px;
  padding-top:5px;
  padding-bottom: 5px;

}

#center{
  float: left;
  width: 30%;
  height: 70px;
  padding-top:5px;
  padding-bottom: 5px;
 }
 
 
#right{
  float: right;
  width: 30%;
  height: 70px;
  padding-top:5px;
  padding-bottom: 5px;
  margin-left: -60%;
 }

<div id="wrapper">
  <div id="left"> text</div>
  <div id="center"> text</div>
  <div id="right">text</div>
  <div id="cleared"></div>
</div>

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

Emulate nested <img> in <h1> without actually nesting

html

css

layout

nested