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

Posted 2023-03-06

【中文标题】如何删除使用 <ion-fab-button> 生成的换行符

【英文标题】：How to remove line break that is generated with <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;

谢谢

【参考方案1】：

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

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