带按钮的离子按钮 (Ionic 3)

【问题标题】：ion-buttons with buttons (Ionic 3)带按钮的离子按钮 (Ionic 3)
【发布时间】：2018-02-17 03:58:59
【问题描述】：

我使用离子按钮来创建一个带有两个按钮的空间。我需要在右侧分配一个按钮，在左侧分配另一个按钮，但它不起作用，按钮保持未对齐。

用于更好地可视化问题的图像：

<ion-footer>
    <ion-toolbar>
        <!--Testes-->
        <ion-buttons>
            <button ion-button color="dark" (click)="btn_reportlog()">Reportar Log</button>
            <div class="btn_right"><button ion-button color="danger" (click)="btn_deletlog()">Excluir Log</button></div>
        </ion-buttons>
    </ion-toolbar>
</ion-footer>

【问题讨论】：

在你的 scss 中添加：.btn_right{ float: right; }
它的工作。我已经在 scss 中声明了，但没有使用 float。谢谢！

标签： html ionic-framework ionic3

【解决方案1】：

由于您在ion-toolbar 中使用ion-buttons 标签，您可以使用start end left right 等属性定位您的button 标签来源：ionic doc。这里不用碰 CSS，让 ionic 为你做吧。

<ion-footer>
    <ion-toolbar>
        <ion-buttons>
            <button ion-button color="dark" (click)="btn_reportlog()" start>Reportar Log</button>
            <button ion-button color="danger" (click)="btn_deletlog()" end>Excluir Log</button>
        </ion-buttons>
    </ion-toolbar>
</ion-footer>

【讨论】：