使边距不可点击

Question

我是 css 的新手，我通常可以通过反复试验来解决问题，但这个让我很困惑。我正在使用 sprite 页面在我的主页上显示类别。

html 是

<div id="sprite2">
    <a style="display:inline-block" href="https://www.subscriptionboxaustralia.com/product-category/adults-sex-toy-subscription-boxes/"><div class="sprite2" id="adults-boxes"></div></a>
    <a style="display:inline-block" href="https://www.subscriptionboxaustralia.com/product-category/arts-crafts-creative-subscription-boxes/"><div class="sprite2" id="arts-boxes"></div></a>
    </div>

而 css 是

    .sprite2 {
    background-image: url(https://www.subscriptionboxaustralia.com/wp-content/themes/accesspress-store/images/Subscription-categories-spritesheet.png);
    background-repeat: no-repeat;
display:inline-block;

}

#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;
    margin-left: 120px
    }


#arts-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -94px;   
    margin-left: 70px
}

如您所见，每张图片周围的边距都是可点击的？我该如何解决这个问题，我已经阅读了很多帖子，但我似乎无法将这些概念应用到我自己的代码中。

www.subscriptionboxaustralia.com

**更新第一个给出的答案非常适合桌面，非常感谢！！！！现在唯一的问题是它抛弃了我的移动样式

@media (max-width: 480px) {
#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;
    transform: scale(.8);
    margin-left: -33px;}}

@media (min-width: 481px) {
#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;}}

我用它来缩小移动图像，由于某种原因图像位于右侧，所以我使用 -33px 使其位于左侧边缘，现在它被推到了又对了吗任何想法哦明智 css yodas？ =)

Answer 1

您为子元素 sprite2 提供了边距，而不是为您 a 标签提供边距，后者会给您边距但不可点击。检查代码段。

    .sprite2 {
    background-image: url(https://www.subscriptionboxaustralia.com/wp-content/themes/accesspress-store/images/Subscription-categories-spritesheet.png);
    background-repeat: no-repeat;
display:inline-block;

}

#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;
    }


#arts-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -94px;   
}

<div id="sprite2">
    <a style="display:inline-block; margin-left: 120px" href="https://www.subscriptionboxaustralia.com/product-category/adults-sex-toy-subscription-boxes/"><div class="sprite2" id="adults-boxes"></div></a>
    <a style="display:inline-block; margin-left: 70px;
" href="https://www.subscriptionboxaustralia.com/product-category/arts-crafts-creative-subscription-boxes/"><div class="sprite2" id="arts-boxes"></div></a>
    </div>

Answer 2

您正在将边距应用到内标签的 a 框。所以这将扩展 a 标签的内容，从而使边距可点击。一个解决方案是将 margin-left: 70px 移动到 a class:

的选择器

.sprite2 {
  background-image: url(https://www.subscriptionboxaustralia.com/wp-content/themes/accesspress-store/images/Subscription-categories-spritesheet.png);
  background-repeat: no-repeat;
  display:inline-block;
}

.sprite-link-adults {
  margin-left: 120px;
}

.sprite-link-arts {
  margin-left: 70px;
}

#adults-boxes {
  width: 425px;
  height: 49px;
  background-position: -15px -15px;
}


#arts-boxes {
  width: 425px;
  height: 49px;
  background-position: -15px -94px;
}

<div id="sprite2">
  <a class="sprite-link-adults" href="https://www.subscriptionboxaustralia.com/product-category/adults-sex-toy-subscription-boxes/">
    <div class="sprite2" id="adults-boxes"></div>
  </a>
  <a class="sprite-link-arts" href="https://www.subscriptionboxaustralia.com/product-category/arts-crafts-creative-subscription-boxes/">
    <div class="sprite2" id="arts-boxes"></div>
  </a>
</div>

Answer 3

我认为问题出在你的图像作为背景。图像没有为我加载，所以我看不到它，但也许它可能重叠。我已将图像更改为背景颜色，边距虽然很小，但不可点击。注意：我没有更改标记。

[Codepen][1]

Answer 4

您可以将 HTML 更改为此，它应该可以工作。调整高度和宽度以匹配您需要的碰撞尺寸。

<div id="sprite2">
    <div class="sprite2" id="adults-boxes">
         <a style="width:424px; height: 49px; display:inline-block" href="#"></a>
    </div>
    <div class="sprite2" id="arts-boxes">
         <a style="width:424px; height: 49px; display:inline-block" href=""></a>
    </div>
</div>

.sprite2 {
    background-image: url(https://www.elegantthemes.com/blog/wp-content/uploads/2015/02/custom-trackable-short-url-feature.png);
    background-repeat: no-repeat;
display:inline-block;

}

#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;
    margin-left: 120px
    }


#arts-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -94px;   
    -margin-left: 70px
}

<div id="sprite2">
    <div class="sprite2" id="adults-boxes">
         <a style="height:49px; width:424px; display:inline-block" href="#"></a>
    </div>
    <div class="sprite2" id="arts-boxes">
         <a style="height:49px; width:424px; display:inline-block" href=""></a>
    </div>
</div>

Answer 5

其实margin是不可点击的，padding和border是可点击的，你可以看一下here。据我所知，这适用于所有语言。

现在在我们解决你的问题之前，可点击的部分是 <a> 的部分，所以它是可点击的，我认为 div 是你想要点击的那个，在那如果您应该降低 <a> 高度或增加 <div> 高度。

它实际上是这样工作的：

来自 <a style="display:inline-block"

到<a style="display:inline-block; height:0"

使边距不可点击

Make the margin not clickable

html

css

css-sprites