如何删除使用 <ion-fab-button> 生成的换行符答案

【问题标题】：How to remove line break that is generated with <ion-fab-button>如何删除使用 <ion-fab-button> 生成的换行符
【发布时间】：2021-03-29 16:29:33
【问题描述】：

我有一个我正在为自己制作的应用程序，我有两个 's 和一个在中间。在按钮末尾自动生成换行符，使 UI 看起来像这样： image

我尝试向按钮添加一个 css 标记并在 css 中使用 display: inline，但这只会使按钮变宽。

这是该部件的当前 HTML：

<ion-col size="auto">
    <ion-fab-button class="pmButton" (click)="pmOne('-', info.key, info.value.count)" color="danger" >-</ion-fab-button>
    <span class="ion-margin info">{{info.value.count}}  {{itemUnits}}</span>
    <ion-fab-button class="pmButton" (click)="pmOne('+', info.key, info.value.count)" color="success" >+</ion-fab-button>
</ion-col>

和 CSS：

.pmButton {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    text-align: center;
}

.info {
    display: inline;
    vertical-align: middle;
    text-align: center;
}

谢谢

【问题讨论】：

标签： html css ionic-framework sass

【解决方案1】：

您可以将display: flex 放在父元素<ion-col> 上，必要时也可以放在flex-direction: row 上。

如果由于它是一个组件而无法做到这一点，请将其内容包装在一个带有类的 div 中，然后应用上面的 CSS。

【讨论】：