Question

在我的Ionic 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

您正在寻找的当然是将您的容器设置为position：relative（或其他任何东西），然后将您的按钮设置为position：absolute，然后相对于容器设置顶部和左侧。

但是，您只需将按钮的高度和宽度更改为“使可点击区域更大”。

编辑：

怎么样：

<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>

我认为这就是你想要的。

带有div

1 个答案: