css - 角度のある素材でラジオボタンを水平に揃える方法は?

Question

これには組み込みのディレクティブまたはタグを期待していましたが、おそらくドキュメントによるとそうではありません。

これは例です。

<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>

Answer 1

デフォルトの 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>

md-radio-groupタグにlayout="row"属性を入れるだけです。

Answer 2

既存のクラスをオーバーライドしない方がよいでしょう。

ディレクティブ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>

Answer 3

レイアウト行を使用していて、ラジオ グループが行レイアウトの親にある場合、テキストの垂直方向の配置が崩れます。魂はそれを空のラッパー要素に入れています。

<div layout="row">
     ...
     <div>
        <md-radio-group ng-model="data.group1" aria-labelledby="favoriteFruit" layout="row">
          <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>
     </div>
     ...
</div>