CSS 如何在角度材料中水平对齐单选按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31114973/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align the radio buttons horizontally in angular material?
提问by Asqan
I was expecting a in-built directive or a tag for this but probably not according to their documentation.
我期待一个内置指令或标签，但可能不是根据他们的文档。
This is the example.
这就是例子。
<div class="radioButtondemoBasicUsage" ng-app="MyApp">
<form ng-submit="submit()" ng-controller="AppCtrl">
<p>Selected Value: <span class="radioValue">{{ data.group1 }}</span> </p>
<md-radio-group ng-model="data.group1">
<md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>
<md-radio-button value="Banana"> Banana </md-radio-button>
<md-radio-button value="Mango">Mango</md-radio-button>
</md-radio-group>
回答by Fábio Palmeira
You do not need to override any default CSS:
您不需要覆盖任何默认 CSS：
<md-radio-group layout="row">
<md-radio-button value=0 class="md-primary">On</md-radio-button>
<md-radio-button value=1> Off </md-radio-button>
</md-radio-group>
Just put in md-radio-grouptag a layout="row"attribute.
只需放入md-radio-group标记一个layout="row"属性。
回答by Shyam Devasia
Better not override any existing class.
最好不要覆盖任何现有的类。
Use the directive ng-styleand give value for display parameter.
使用指令ng-style并为显示参数提供值。
<md-radio-group ng-model="selvalue">
<md-radio-button value="A" class="md-primary" ng-style="{'display':'inline'}"> Apple</md-radio-button>
<md-radio-button value="R" class="md-primary" ng-style="{'display':'inline'}"> Orange </md-radio-button>
</md-radio-group>
