标签和组单选按钮水平对齐
Posted
技术标签:
【中文标题】标签和组单选按钮水平对齐【英文标题】:Label and group radio buttons horizontally aligned 【发布时间】:2017-10-28 21:32:41 【问题描述】:我有一个标签和组单选按钮(两个),我想让它像图片中一样水平对齐。
我试过这段代码:
`<ion-row radio-group [(ngModel)]="Sexe">
<ion-col>
<ion-item>
<ion-label color="primary">Sexe</ion-label>
<ion-radio value="Mr"></ion-radio>
<ion-radio value="Mme"></ion-radio>
</ion-item>
</ion-col>
</ion-row>`
还有这段代码:
`<ion-row radio-group [(ngModel)]="Sexe">
<ion-col>
<ion-item>
<ion-label color="primary">Sexe</ion-label>
</ion-item>
<ion-item>
<ion-radio value="Mr"></ion-radio>
</ion-item>
<ion-item>
<ion-radio value="Mme"></ion-radio>
</ion-item>
</ion-col>
</ion-row>`
但我没有想要的结果。
【问题讨论】:
【参考方案1】:您可以为此使用ion-row
和ion-col
元素。请看this working plunker。
<ion-row radio-group [(ngModel)]="sexe">
<ion-col>
<ion-item>
Sexe
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label>Homme</ion-label>
<ion-radio value="homme"></ion-radio>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label>Femme</ion-label>
<ion-radio value="femme"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
由于我们使用单行三列,因此标题和单选项目将全部放置在同一行中(水平对齐)。
【讨论】:
【参考方案2】:<ion-row>
<ion-label class="ion-label" color=dark>Save</ion-label>
</ion-row>
<ion-row radio-group [(ngModel)]="relationship" class="item">
<ion-col>
<ion-radio value="manually" checked></ion-radio>
<ion-label>Manually</ion-label>
</ion-col>
<ion-col>
<ion-radio value="automatic"></ion-radio>
<ion-label>Automatically</ion-label>
</ion-col>
</ion-row>
【讨论】:
【参考方案3】:<ion-radio-group>
<ion-row>
<ion-col size="4">
<ion-item>
<ion-label>Site Visit</ion-label>
<ion-radio value="site"></ion-radio>
</ion-item>
</ion-col>
<ion-col size="4">
<ion-item>
<ion-label>Call</ion-label>
<ion-radio value="call"></ion-radio>
</ion-item>
</ion-col>
<ion-col size="4">
<ion-item>
<ion-label>Final Deal</ion-label>
<ion-radio value="deal"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
</ion-radio-group>
【讨论】:
【参考方案4】:<ion-radio-group value="biff">
<table><tr>
<td>
<ion-item>
<ion-label>Biff</ion-label>
<ion-radio value="biff"></ion-radio>
</ion-item>
</td>
<td>
<ion-item>
<ion-label>Griff</ion-label>
<ion-radio value="griff"></ion-radio>
</ion-item>
</td></tr>
</table>
</ion-radio-group>
【讨论】:
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。以上是关于标签和组单选按钮水平对齐的主要内容,如果未能解决你的问题,请参考以下文章
jQuery使用数据目标更改带有onClick侦听器的一组单选按钮标签的innerHtml