如何将此按钮放置在右侧？答案

【问题标题】：How to position this button on the right side?如何将此按钮放置在右侧？
【发布时间】：2017-10-14 09:58:44
【问题描述】：

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

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>

这里是按钮

【问题讨论】：

因为它是ion-item 的一部分，所以item-end 属性应该可以解决问题：<button ion-button item-end ...>Add</button>

标签： html css sass ionic2 ionic3

【解决方案1】：

就像您在 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>

【讨论】：

很高兴听到@ColinM。 :)

【解决方案2】：

使用ion-item padding。

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

你也可以使用 css。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：