我在我的Ionic 3应用程序中有这个ion-item
。它包括ion-badge
和ion-button
。我希望它们都在ion-item
内垂直对齐。我在here尝试了答案,但它没有用。最后,我需要将这些ion-badge
和ion-button
并排。
<ion-item>
<ion-badge>150</ion-badge>
<button ion-button>My Button</button>
</ion-item>
在ion-item
中添加一个类。
HTML:
<ion-item class="my-item">
<ion-badge>150</ion-badge>
<button ion-button>My Button</button>
</ion-item>
并将以下CSS样式添加到ion-label
的ion-item
子项中。
SCSS:
.my-item {
ion-label {
display: flex;
flex-direction: row;
align-items: baseline
}
}
更新:
将图标添加到按钮的代码和结果:
HTML:
<ion-item class="my-item">
<ion-badge>150</ion-badge>
<button ion-button icon-end>My Button
<ion-icon name="arrow-down"></ion-icon>
</button>
</ion-item>
SCSS:
.my-item {
ion-label {
display: flex;
flex-direction: row;
align-items: baseline
}
ion-icon {
margin-left: 5px;
}
}
另外,我为<ion-icon>
添加了一个CSS规则,以便在文本和按钮中的图标之间获得som空间。
辩解内容:中心;会工作!!
ion-badge {justify-content: center; }