我在php中插入了带图像的链接,但链接无法在移动设备上点击。我尝试了太多方法来解决这个问题,但失败了。我的网站在wordpress平台上运行。我不知道css代码或html代码是否有错误。请帮助任何人。这是我插入的代码:
.gallery1 {
border: 1px solid #ccc;
border-radius:6px;
}
.gallery1:hover {
border: 1px solid #777;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: transform 1.05s ease-in-out;
-moz-transition:transform 1.05s ease-in-out;
-ms-transition:transform 1.05s ease-in-out;
}
.gallery1 img {
width: 100%;
height: auto;
border-radius: 6px 6px 0px 0px;
}
.descr {
padding: 1px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive1 {
padding: 0 6px;
float: left;
width: 25%;
}
@media only screen and (max-width: 700px) {
.responsive1 {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 480px) {
.responsive1 {
width: 94%;
margin-left: 10px;
padding-bottom: 20px;
}
}

<div class="responsive1" style="padding-bottom:20px">
<div class="gallery1">
<a href="https://www.cbshop.in/?couponid=4160&showid=4160_1449960893#itemid4160" target="_blank">
<img src="https://www.cbshop.in/wp-content/uploads/2018/02/Flights-offer.jpg" alt="" width="300" height="200">
</a>
<a target="_blank" href="https://www.cbshop.in/store/goomo-coupons/">
<img src="https://www.cbshop.in/wp-content/uploads/2018/01/goomo-1493622670890.jpg" alt="" width="100" height="50">
</a>
<div class="descr"><a target="_blank" href="https://www.cbshop.in/store/goomo-coupons/?couponid=4160&showid=4160_1449960893#itemid4160">Flat Rs. 300 off on domestic airlines</a></div>
</div>
</div>
&#13;
答案 0 :(得分:0)
将a
元素设为块元素。实际上它们是内联的,在小屏幕内它们的高度非常小。更准确地说,高度由line-height
/ font-size
定义。
.gallery1 {
border: 1px solid #ccc;
border-radius:6px;
}
.gallery1:hover {
border: 1px solid #777;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: transform 1.05s ease-in-out;
-moz-transition:transform 1.05s ease-in-out;
-ms-transition:transform 1.05s ease-in-out;
}
.gallery1 img {
width: 100%;
height: auto;
border-radius: 6px 6px 0px 0px;
}
.descr {
padding: 1px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive1 {
padding: 0 6px;
float: left;
width: 25%;
}
a {
display:block;
}
@media only screen and (max-width: 700px) {
.responsive1 {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 480px) {
.responsive1 {
width: 94%;
margin-left: 10px;
padding-bottom: 20px;
}
}
<div class="responsive1" style="padding-bottom:20px">
<div class="gallery1">
<a href="https://www.cbshop.in/?couponid=4160&showid=4160_1449960893#itemid4160" target="_blank">
<img src="https://www.cbshop.in/wp-content/uploads/2018/02/Flights-offer.jpg" alt="" width="300" height="200">
</a>
<a target="_blank" href="https://www.cbshop.in/store/goomo-coupons/">
<img src="https://www.cbshop.in/wp-content/uploads/2018/01/goomo-1493622670890.jpg" alt="" width="100" height="50">
</a>
<div class="descr"><a target="_blank" href="https://www.cbshop.in/store/goomo-coupons/?couponid=4160&showid=4160_1449960893#itemid4160">Flat Rs. 300 off on domestic airlines</a></div>
</div>
</div>