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

Question

有人可以帮忙在芯片之间添加填充，这样它们就不会相互接触并移除“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>

Answer 1

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

您可以设置margin: 5px 或恰到好处的margin 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>