CSS包装按钮带有Div

Question

在我在离子V1中的应用中，我试图用div包裹该按钮，以便我可以使单击它更大的区域，但我无法使其工作：

<div class="row">
   <div class="col">
      <p>{{ comment.text }}</p>
      <div ng-if="canDeleteComment(comment)" class="remove-button-wrapper pull-right">
          <button class="remove" ng-click="deleteComment(comment)"></button>
      </div>
   </div>
</div>

这是删除类的CSS：

.article .comments .item .remove {
    bottom: 0;
    top: auto;
    width: 1.5rem;
    height: 1.5rem;
    right: 1rem;
}
ionic.app.css:9895
.remove {
    display: block;
    background: url(../icons/remove.svg);
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
    position: absolute;
    transform: translateY(-50%);
    padding: 0;
}

我已经尝试将.remove-button-wrapper设置为position:relative和display: inline-block，但是由于包装器一直向左侧，并且按钮在右侧。我应该如何修复CSS以供包装器包装按钮，以便我可以在按钮周围进行一些填充以使点击区域更大？

Answer 1

您要寻找的是将您的容器设置为位置：相对（或其他任何），然后按下按钮的位置：绝对，然后将顶部和左图设置为容器。

但是，您只需更改按钮的高度和宽度，以"使点击区域更大"。

编辑：

怎么样：

<div ng-if="canDeleteComment(comment)" class="remove-button-wrapper pull-right">
    <button class="remove" ng-click="deleteComment(comment)">Value</button>
</div>
<style>
    .remove-button-wrapper{
        display: inline-block;
        padding: 50px;
        background-color: aqua;
    }
</style>

我认为这就是您想要的。