我需要点击数字或拨号图标,它将在我们的手机上拨号。
每当点击要拨打的号码时我都会这样做,但我不知道如何为该图标提供相同的内容。
.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>
答案 0 :(得分: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>
答案 1 :(得分: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;
}
&#13;
<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>
&#13;
答案 2 :(得分:0)
如前所述,在div周围放置<a>
标签可以解决问题。
但是当我看着它的时候,我想我会稍微移动它并向你介绍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>