Ionic3中如何实现按钮横向并排而非上下排列？

看起来你想让两个按钮横向并排而不是上下堆叠，我来帮你调整代码，用Ionic的原生布局特性就能轻松解决这个问题～

方案一：使用Ionic官方按钮+Flex布局（推荐） #

Ionic的<ion-row>默认是Flex布局，子元素会自动横向排列，搭配官方的<ion-button>组件，既能保证样式统一，又能轻松实现横向并排：

<!-- 把条件判断统一放在ion-row上，避免重复编写 -->
<ion-row justify-content-center *ngIf="dado.status == 0">
  <!-- 第一个按钮，加margin-right和另一个按钮拉开间距 -->
  <ion-button color="primary" style="margin-right: 8px;">
    确认
  </ion-button>
  <!-- 取消按钮，用danger色对应你原来的红色背景 -->
  <ion-button color="danger">
    Cancelar
  </ion-button>
</ion-row>

关键说明：

• ion-row的justify-content-center属性可以让按钮整体居中，替代你之前手动设置的margin-left: 50%；如果需要按钮靠右对齐，换成justify-content-end即可。
• 用ion-button自带的color属性设置样式，比手动写background-color更符合Ionic的设计规范，还能自动适配不同平台的样式。
• 把*ngIf放在ion-row上，不用给每个按钮单独加判断，代码更简洁。

方案二：如果你坚持用<span>模拟按钮 #

如果不想用官方按钮组件，也可以通过调整Flex布局让<span>横向排列：

<ion-row style="display: flex; justify-content: center; gap: 8px;" *ngIf="dado.status == 0">
  <span style="background-color: #5cb85c; padding: 8px 16px; border-radius: 4px; cursor: pointer;">
    确认
  </span>
  <span style="background-color: #d9534f; padding: 8px 16px; border-radius: 4px; cursor: pointer;">
    x Cancelar
  </span>
</ion-row>

关键说明：

• 给ion-row加上display: flex（其实Ionic的ion-row默认已经是flex，这里可以省略，但手动写上更明确），让内部元素横向排列。
• 用gap: 8px来设置两个按钮之间的间距，比手动加margin-right更方便。
• 给<span>加上cursor: pointer，模拟按钮的点击交互感。

内容的提问来源于stack exchange，提问作者Luska Zimmermann