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

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

根据我的观察，您可能可以通过添加边距来获得所需的边框样式

   .chip{
                display: inline-block;
                margin-left: 20px;
                margin-right: 20px;
                padding: 0 25px;
                padding-bottom: 25px;
                height: 30px;
                font-size: 12px;
                line-height: 30px;
                border-radius: 25px;
                background-color: #f1f1f1;

Answer 2

为您的.chip类应用边距。

请参阅：https://www.w3schools.com/css/css_margin.asp

要更改关闭按钮的颜色，您应该在button而不是图像（img）上应用规则，请参见下文：

.chip button{
    float: right !important;
    background-color: #ff0000 !important;
}

.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: 0 2px; /* margin-left: 2px; margin-right: 2px; */
}
.chip button{
    float: right !important;
    background-color: #ff0000 !important;
}

<div>
      <ion-label>Activities</ion-label>
      <input type="text" placeholder="Enter activity">
  </div>
  
    <div class="chip" >
          <label> chip 01 </label>
          <button>
            x
          </button>
    </div>
    <div class="chip" >
          <label> chip 02 </label>
          <button>
            x
          </button>
    </div>
    <div class="chip" >
          <label> chip 03 </label>
          <button>
            x
          </button>
    </div>
    <div class="chip" >
          <label> chip 04 </label>
          <button>
            x
          </button>
    </div>

Answer 3

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

您可以设置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>