我尝试将padding和margin设置为0px,但高度仍然没有降低。
padding
margin
0px
ion-segment-button { --padding-bottom: 0px; --padding-top: 0px; --margin-bottom: 0px; --margin-top: 0px; }
我在文档中找不到任何我不能调整的属性。
sqxo8psd1#
你可以这样设置高度。
ion-segment-button{ min-height: 10px; }
e37o9pze2#
需要降低高度和最小高度。它应该工作。
ion-segment-button { height: 30px; min-height: 30px; }
pxiryf3j3#
<ion-segment (ionChange)="segmentChanged($event)" [(ngModel)]="segment" value="0"> <ion-segment-button value="0"> Active </ion-segment-button> <ion-segment-button value="1"> Expire </ion-segment-button> </ion-segment>
CSS:
ion-segment-button { min-height: 32px; }
这对我很有效。另外,检查它是否需要一些高度,以便我们可以相应地管理。
ssgvzors4#
这对我来说很好:(您必须定义离子段按钮的高度)
<ion-segment [(ngModel)]="relationship" color="primary" > <ion-segment-button value="friends" style="height: 30px; font-size: 8px"> Friends </ion-segment-button> <ion-segment-button value="enemies" style="height: 30px; font-size: 8px"> Enemies </ion-segment-button> </ion-segment>
e37o9pze5#
我在css里确实喜欢这个
ion-segment{ height:30px; } ion-segment-button{ min-height:30px; }
zc0qhyus6#
单独设置最小高度会导致按钮中的文本被裁剪。以下是如何调整按钮高度并使文本向下进入新的中心:
ion-segment-button{ height: 30px; min-height: 30px; } ion-segment-button ion-label{ margin:auto; }
6条答案
按热度按时间sqxo8psd1#
你可以这样设置高度。
e37o9pze2#
需要降低高度和最小高度。它应该工作。
pxiryf3j3#
CSS:
这对我很有效。另外,检查它是否需要一些高度,以便我们可以相应地管理。
ssgvzors4#
这对我来说很好:(您必须定义离子段按钮的高度)
e37o9pze5#
我在css里确实喜欢这个
zc0qhyus6#
单独设置最小高度会导致按钮中的文本被裁剪。以下是如何调整按钮高度并使文本向下进入新的中心: