【问题标题】:place the icon to the leftmost of the toolbar将图标放在工具栏的最左侧
【发布时间】:2020-05-24 05:59:55
【问题描述】:

我是离子新手。我想把图标放在工具栏的最左边。

我在标签中使用了slot="start" , class="float-right"ion-float-right,但没有任何效果。

.logo{
    width:100%;
    height: 57px;
    float:  left !important;
}
<ion-header>
  <ion-toolbar>
    <ion-img class="logo float-left"  src='assets/dqlogo-edge.png'></ion-img>  
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

【问题讨论】:

  • 你能创建堆栈闪电战演示吗?

标签: html css ionic-framework ionic4


【解决方案1】:

尝试将您的图片放在&lt;ion-buttons&gt; 元素中。根据Ionic docs,该元素是应该使用slot 属性的地方,如下所示:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-img class="logo"  src='assets/dqlogo-edge.png'></ion-img>  
    </ion-buttons>
  </ion-toolbar>
</ion-header>

【讨论】:

    【解决方案2】:

       &lt;img  class="logo float-left"  src='../assets/dqlogo-edge.png'&gt;

    这对我有用。

    【讨论】:

      【解决方案3】:

      将以下样式分配给您的class

      .float-left{
        float:left;
      }
      

      【讨论】: