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>

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

Answer 1

您可以对h1标记使用float:left;或display:inline-block;，以便图片和标题文字位于同一行：

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尼泊尔很好还是你可以将它们放在两个div中一个右div并且离开div

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

＆＃13;

#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%;
	}

＆＃13;

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

＆＃13;

在<h1>中模拟嵌套的<img/>，而不实际嵌套</h1>

2 个答案: