如何交换标签和单选按钮位置Material AngularJS

angularjs angularjs-directive material-design angular-material

1249 观看

3回复

Material angular放置了这样的无线电盒:

o Apple
o Banana

我反过来想要这个

Apple  o
Banana o

md-radio-button有两个主要部分,

div class =“md-container”,

div class =“md-label”。

容器装有按钮,标签上有标签。

我似乎无法交换这些div的位置。当我尝试向右浮动md-container时,它会移到md-radio-button之外。

我如何交换这两个位置,或者在子组件上使用float而不打破父单选按钮,或者可能采用其他方式?

谢谢

作者: Tuesdave 的来源 发布者: 2019 年 5 月 29 日

回应 (3)


3

你可以这样做

 <md-content>
     <span layout="row" layout-align="center center">
         <span>Apple</span>
         <md-radio-button value="1" aria-label="Apple"> </md-radio-button>
     </span>
</md-content>
作者: nitin 发布者: 01.04.2015 03:13

0

<md-radio-button value="1" labelPosition="before" aria-label="Apple"> </md-radio-button>
作者: Ryan Marken 发布者: 26.03.2019 02:29

0

将此添加到您的CSS:

.md-label {
  margin-left: 0!important;
}

.md-container {
  left: 60px!important;
}

或者你可以这样做:

.md-container {
  position: relative!important;
  transform: translateY(10%)!important;
}

.md-label {
  float: left!important;
  left: 0!important;
  margin-left: 0!important;
  margin-right: 10px!important;
  min-width: 60px;
}

您将需要调整left的定位.md-container还是min-width.md-label虽然建立时间最长的标签上。或者你可以使用最后的解决方案而不关心最小宽度和对齐单选按钮。

作者: mTv 发布者: 26.03.2019 03:09
32x32