1

每当单击数字或拨号图标时，我都需要这样做，它将拨入我们的手机。

每当单击要拨打的号码时，我都会这样做，但是我不知道如何为图标提供相同的功能。

.contact-list {
	background: #fff;
	background-size: 30px;
	padding-left: 10px;
	padding-top: 10px; //
	padding-bottom: 7px;
	border-bottom: 1px dashed #999;
}
<div class="contact-list" data-tel="974-4433665588" href="tel:974-4433665588">
		<h2>Fire</h2>
		<p>
			<span><a data-rel="external"
				data-tel="974-4433665588" href="tel:974-4433665588"
				style="color: #333946; text-decoration: none; font-weight: normal;">974-4433665588</a></span>
			<span><img src="img/contact.png" alt="974-4433665588" style="width: 28px;float: right;margin-top: -19px !important;margin-right: 13px;" /></span>
		</p>
	</div>

在此处输入图像描述

4

3 回答 3

1

您需要将图标包装在a标签中，如下所示：

    <div class="contact-list" data-tel="974-4433665588" href="tel:974-4433665588">
            <h2>Fire</h2>
            <p>
                <span><a data-rel="external"
                    data-tel="974-4433665588" href="tel:974-4433665588"
                    style="color: #333946; text-decoration: none; font-weight: normal;">974-4433665588</a></span>
                <span><a href="tel:974-4433665588">
<img src="img/contact.png" alt="974-4433665588" style="width: 28px;float: right;margin-top: -19px !important;margin-right: 13px;" /></a></span>
            </p>
        </div>
于 2016-06-23T08:08:38.573 回答
0

只需将图像包装到链接（<a>标签）中。

<a data-rel="external" data-tel="974-4433665588" href="tel:974-4433665588">
   <img src="https://image.freepik.com/free-icon/phone-call_318-62608.png" alt="974-4433665588" class="phone-image"/>
</a>

这是完整的代码：

.contact-list {
  background: #fff;
  background-size: 30px;
  padding-left: 10px;
  padding-top: 10px; //
  padding-bottom: 7px;
  border-bottom: 1px dashed #999;
}
.phone-label {
  color: #333946;
  text-decoration: none;
  font-weight: normal;
}
.phone-image {
  width: 28px;
  float: right;
  margin-top: -5px !important;
  margin-right: 13px;
}
<div class="contact-list" data-tel="974-4433665588" href="tel:974-4433665588">
  <h2>Fire</h2>
  <p>
    <span>
      <a data-rel="external" data-tel="974-4433665588" href="tel:974-4433665588" class="phone-label">974-4433665588</a>
    </span>
    <span>
      <a data-rel="external" data-tel="974-4433665588" href="tel:974-4433665588">
        <img src="https://image.freepik.com/free-icon/phone-call_318-62608.png" alt="974-4433665588" class="phone-image"/>
      </a>
    </span>
  </p>
</div>

于 2016-06-23T08:33:56.527 回答
0

如前所述，将<a>标签放在 div 周围将解决问题。

但是当我在看它的时候，我想我应该稍微移动一下，然后向你介绍flexbox，它对样式很有帮助。

最好有一个 css 文件而不是内联样式。它看起来更整洁，更容易更改（即使样式重复，您也只需执行一次）

.phone-link {
  text-decoration: none;
}
.contact-list {
  background: #fff;
  background-size: 30px;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 7px;
  border-bottom: 1px dashed #999;
  display: flex;
  align-items: center;
}
.phone-no h2 {
  color: #000;
}
.phone-no {
  color: #333946;
  font-weight: 400;
}
.phone-icon {
  margin: 13px;
}
.filler {
  flex: 1;
}
<a data-rel="external" data-tel="974-4433665588" href="tel:974-4433665588" class="phone-link">
  <div class="contact-list" data-tel="974-4433665588" href="tel:974-4433665588">
    <span class="phone-no">
      <h2>Fire</h2>
      974-4433665588
    </span>
    <span class="filler"></span>
    <span class="phone-icon">
      <img src="http://www.toyotaoftricities.com/assets/d1123/img/phone_icon.png" alt="974-4433665588" />
    </span>
  </div>
</a>
<a data-rel="external" data-tel="974-1223344556" href="tel:974-1223344556" class="phone-link">
  <div class="contact-list" data-tel="974-1223344556" href="tel:974-1223344556">
    <span class="phone-no">
      <h2>Police</h2>
      974-1223344556
    </span>
    <span class="filler"></span>
    <span class="phone-icon">
      <img src="http://www.toyotaoftricities.com/assets/d1123/img/phone_icon.png" alt="974-4433665588" />
    </span>
  </div>
</a>

于 2016-06-23T08:37:55.970 回答