Question

我在将“ +”按钮移到“受欢迎”一词的右侧时遇到问题。

代码如下：

<ion-header>

   <ion-navbar color="navbar">
    <ion-buttons left>
    </ion-buttons>
   <ion-title text-center>Popular Itineraries</ion-title>
     <div right>
          <img src="assets/img/ic-add.png" (click)="openModal()"/>
     </div>
</ion-navbar>

Answer 1

我注意到在Ionic框架中，您不能在div中使用正确的东西，并希望它向右浮动，简单地为div或img设置类名或id名称，并且在样式上，您可以简单地做一些事情像这样：假设我们的div的ID是img，那么我们可以有这样的东西：

#img{
float: right;
}

如果上述方法无效，您可以做的另一件事是

#img{
    right: 0;
    position: absolute; //This one usually work in most case
    }

Answer 2

如果您关注文档，则应使用带有离子按钮的“开始”和“结束”在工具栏或导航栏中放置按钮和类似元素：

示例：

<ion-buttons end>
      <button ion-button clear icon-start>
        <ion-icon name="aperture"></ion-icon>
        Snip!
      </button>
</ion-buttons>

这是生产应用程序中的一个示例：

<ion-header>
  <ion-navbar>
    <ion-buttons start>
      <button [disabled]="false" ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>
      <ion-col>
        Publisher<br>
        <ion-icon *ngIf="!foundation.appIsOnline || foundation.offGridMode" name="warning" isActive="false" color="danger" >
            <small>Offgrid</small>
        </ion-icon>
      </ion-col>
    </ion-title>
    <ion-buttons end>
        <button (click)="loadProfilePage()" ion-button clear item-end icon-right>100
          <ion-icon name="contact"></ion-icon>
        </button>
      </ion-buttons>
  </ion-navbar>
  <ion-toolbar>
      <ion-buttons start>
          <button ion-button clear icon-start (click)="matrix3d()">
            <ion-icon name="glasses"></ion-icon>
            Matrix3D
          </button>
        </ion-buttons>
      <ion-title class="centrify">
        <button (click)="loadTutorialsPage()" ion-button clear icon-start>
          <ion-icon name="school"></ion-icon>
          Learn
        </button>
      </ion-title>
      <ion-buttons end>
        <button ion-button clear icon-start (click)="saveSceneAsPNG()">
          <ion-icon name="share"></ion-icon>
          Share
        </button>
      </ion-buttons>
    </ion-toolbar>
</ion-header>

在这种情况下，如果希望用户仅将图标视为按钮，则可以使用“仅图标”作为按钮的属性。查看官方文档了解更多详细信息

无法将图标按钮向右移动

2 个答案: