html - 芯片关闭按钮不会遵守 css

Question

我似乎无法让芯片上的关闭 x 出现并遵守 .css。

这是HTML：

<ion-card>
  <ion-card-content>
    <ion-label>City</ion-label>
      <input placeholder="Enter city" #searchPlaces>
    <div class="selected-places">
    <ion-chip *ngFor="let intPlace of intPlaces">
      <ion-label>{{ intPlace }}</ion-label>
      <button (click)="deletePlace(intPlace)">
        <img src="assets/img/ic-small-close.png"/>
      </button>
    </ion-chip>
  </div> 
  </ion-card-content>
</ion-card>

和CSS

.selected-places {
    ion-label{
      width: 79.4px;
      font-family: Gotham;
      font-size: 14.2px;
      font-weight: normal;
      font-style: normal;
      font-stretch: normal;
      line-height: normal;
      letter-spacing: normal;
      text-align: left;
      color: black !important;
      overflow-y: visible !important;
     }

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

出于某种原因，我无法让 x 显示在芯片上。我试过玩css，但它不会出现在芯片上。

“L”下的灰色竖条应该是“x”img。

标签： htmlcssangularionic-framework

Answer 1

我通过完全放弃离子芯片并仅使用标签解决了这个问题。我遇到了几个通过不使用 ION 特定元素而仅使用常规 html 对应元素来解决的问题。