【问题标题】:border issue with button css on ionic (html app)离子按钮css的边框问题(html应用程序)
【发布时间】:2018-02-28 17:27:45
【问题描述】:

我不知道如何从我的按钮上取下这个“边框”。已经尝试了很多。 有人有想法吗?

<ion-header>
  <ion-navbar>
    <ion-title>Background Images</ion-title>
  </ion-navbar>
</ion-header>


<ion-content class="card-background-page">
  <ion-grid>
  <ion-row>
    <ion-col col-6>
      <ion-card>
        <button ion-button icon-only>
          Laboratorio
        <ion-icon name="medkit"></ion-icon>
      </button>

      </ion-card>
    </ion-col>
    <ion-col col-6>
      <ion-card>
        <button ion-button icon-right>
    Clinicas
    <ion-icon name="pulse"></ion-icon>
  </button>


      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>
  <ion-grid>
  <ion-row>
    <ion-col col-6>
      <ion-card>
        <button ion-button icon-left>
    <ion-icon name="eye"></ion-icon>
    Pele
  </button>

      </ion-card>
    </ion-col>
    <ion-col col-6>
      <ion-card>
        <button ion-button icon-right>
  Odontologia
  <ion-icon name="home"></ion-icon>
</button>


      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>
</ion-content>

CSS :
.card-background-page {

  ion-card {
    position: relative;
    text-align: center;
  }

  .card-title {
    position: absolute;
    top: 5%;
    font-size: 1.4em;
    width: 100%;
    font-weight: bold;
    color: #fff;
    float: left;
  }

  .card-subtitle {
    font-size: 1.0em;
    position: absolute;
    top: 80%;
    width: 100%;
    color: #fff;
    float: left;
  }

}

#button
{
  width: 10px;
  height: 10px;
  z-index: -1;
  outline: none;
}

【问题讨论】:

  • 能否请您复制/粘贴您的代码,不要使用屏幕截图。如果可能的话,给我们最终的 HTML/CSS 代码而不是离子代码,这样我们就可以检查应用于元素的 css
  • 发布答案! tks!

标签: html css button ionic-framework border


【解决方案1】:

删除 ion-card 标签并尝试不使用。我认为这个标签正在添加边框。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-11-01
    • 2020-05-15
    • 2012-02-02
    • 1970-01-01
    • 2017-12-10
    • 1970-01-01
    • 2021-07-25
    • 1970-01-01
    相关资源
    最近更新 更多