如何在右侧放置此按钮？

Question

我希望你能帮我解决这个问题。从昨天开始，我一直试图将这个绿色按钮放在右侧。像保证金这样的东西不起作用：（

HTML

<ion-header>
  <ion-toolbar color="rank">
    <ion-searchbar (input)="getItems($event)"></ion-searchbar>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list-header>
    Friends
  </ion-list-header>
  <ion-list>
    <ion-item>
      <ion-avatar item-start>
        <img src="img/fri.jpg">
      </ion-avatar>
      <h1>JanePrincess</h1>
      <h3>Iceland, Reykjavik </h3>
      <button ion-button color="rank" round>Add</button>
    </ion-item>
  </ion-list>
</ion-content>

此处有按钮

Answer 1

使用ion-item padding。

<ion-item padding>
 <button default ion-button item-right color="rank" round >Add</button>
</ion-item>

您也可以使用css。

Answer 2

就像您在 the docs 中看到的那样，您可以通过使用按钮中的item-end属性来实现这一目标：

<ion-list>
  <ion-item>
    <ion-avatar item-start>
      <img src="img/fri.jpg">
    </ion-avatar>
    <h1>JanePrincess</h1>
    <h3>Iceland, Reykjavik </h3>
    <button ion-button color="rank" round item-end>Add</button>
  </ion-item>

  <!-- ... -->

</ion-list>

Answer 3

我希望您为上述问题制作了CSS文件，因此请尝试将以下代码放入其中：

button {
  color:green;
  position:relative;
  top:-43px;
  left: 410px;
}

要水平调整按钮的位置，只需相应调整left位置。