Question

有一个<h2>标签，包含文字和图片。我想将图像作为超链接而不包括文本。

<h2>Sample text<img src="test.png"></h2>

我尝试使用<div>，<span>等来设置锚标记，但它会将<h2>分成2行。

<h2><nav>Sample text</nav><nav><a href=""><img src="test.png"></a></nav></h2>

我只能将整个<h2>作为超链接，而不是内部的图像。

有没有办法在<h2>标记内制作图片，而不会将<h2>标记分成两行？

Answer 1

当您向其添加了不必要的<nav>标记时，您问题中的代码会分成多行。

要在没有换行符的情况下实现所需，请使用jQuery在img中选择h2，然后您可以使用wrap()添加锚点。试试这个：

$('h2 img').wrap('<a href="http://www.stackoverflow.com"></a>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Sample text<img src="test.png"></h2>

请注意，由于SO域所具有的SAMEORIGIN X-Frame-Options，上面的链接实际上无法正常工作，但它可以在完整的窗口中使用。

Answer 2

仅使用css。这是fiddle

<h2><a href="">Sample text<img src="https://lh3.googleusercontent.com/_o15gKsnxOAVksRFPKYBUmD5TSkf2twg62_zYnJSdOGueQ03zB8sR05zZyyLXycAtck=w300"></a></h2>

诀窍只在你的css中：

 a{
    line-height: 0; 
    font-size: 0;
    color: transparent; 
 }

Answer 3

您可以将float:left用于nav和img，以获得简单的解决方案。

＆＃13;

h2 nav, h2 img{
  float:left;
}

＆＃13;

<h2><nav>Sample text</nav><nav><a href="#"><img src="https://www.w3schools.com/css/trolltunga.jpg" width="100px" height="100px"></a></nav></h2>

＆＃13;

Answer 4

我这样做的方式是。

<a href="#"><img src="#" height=_  width=_ ></a>

还有很多其他方式。使用前面提到的jquery。但如果你是初学者......这可以帮助你。

Answer 5

希望这有效。请务必将此作为基础。这只是一个样本。

＆＃13;

.content {
  position: absolute;
  bottom: 0px;
  height: 90px;
  background: #ff9600;
  width: 100%;
}

.content-block {
  position: relative;
  height: 70px;
}

.content-block img {
  position: absolute;
  bottom: 0px;
  left: 10px;
}

＆＃13;

<div class="content">
  <div class="content-block"> 
    <img src="images/sample.png" width="280" height="" alt="" />
    <h2>ensure much better learning and development</h2>
  </div>
</div>

＆＃13;

如何在<h2>标签中制作图像超链接</h2> <h2>由文本和图像组成？

5 个答案: