각진 재료에서 라디오 버튼을 수평으로 정렬하려면 어떻게 해야 합니까?

각진 재료에서 라디오 버튼을 수평으로 정렬하려면 어떻게 해야 합니까?

나는 이것에 대한 기본 제공 지침이나 태그를 기대했지만, 아마도 그들의 설명서에 따르면 그렇지 않을 것이다.

이것이 그 예입니다.

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

디폴트 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"기여하다.

기존 클래스를 재정의하지 않는 것이 좋습니다.

지시문을 사용하다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>

레이아웃 행을 사용하여 무선 그룹이 행 레이아웃 부모에 있는 경우 텍스트 수직 알리긴이 끊어집니다.소울레이션은 그것을 빈 래퍼 요소에 넣는 것이다.

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

언급URL : https://stackoverflow.com/questions/31114973/how-to-align-the-radio-buttons-horizontally-in-angular-material