html - 如何在芯片之间添加填充并更改关闭按钮的背景颜色

有人可以帮助在芯片之间添加填充物，以使它们彼此不接触并消除'x'的背景颜色。

这是.css

        .chip{
            display: inline-block;
            padding: 0 25px;
            padding-bottom: 25px;
            height: 30px;
            font-size: 12px;
            line-height: 30px;
            border-radius: 25px;
            background-color: #f1f1f1;
        img{
            float: right !important;
            background-color: #f1f1f1 !important;
        }
    }

    <div>
      <ion-label>Activities</ion-label>
      <input type="text" [(ngModel)]="addActivities" (keyup.enter)="addActivity()"
              placeholder="Enter activity">
</div>
    <div class="chip" *ngFor="let activity of activities">
          <label> {{ activity }} </label>
          <button (click)="deleteActivity(activity)">
            <img src="assets/img/ic-small-close.png"/>
          </button>
    </div>

最佳答案

在chip文件的.scss类中使用margin。

您可以设置margin: 5px或仅设置右边距margin-right: 5px。会的。

.chip{
        display: inline-block;
        padding: 0 25px;
        padding-bottom: 25px;
        height: 30px;
        font-size: 12px;
        line-height: 30px;
        border-radius: 25px;
        background-color: #f1f1f1;
        margin: 5px;
}
.chip img{
    float: right !important;
    background-color: #f1f1f1 !important;
}

<div class="chip">
  <label>Activity 1</label>
  <button (click)="deleteActivity(activity)">
      <img src="assets/img/ic-small-close.png"/>
  </button>
</div>
<div class="chip">
  <label>Activity 2</label>
  <button (click)="deleteActivity(activity)">
      <img src="assets/img/ic-small-close.png"/>
  </button>
</div>

关于html - 如何在芯片之间添加填充并更改关闭按钮的背景颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51145563/