Question

材质角度放置了这样的无线电盒子：

o Apple
o Banana

我想要反过来

Apple  o
Banana o

md-radio-button有两个竞争对手，

div class =＆＃34; md-container＆＃34;，

和

div class =＆＃34; md-label＆＃34;。

容器拿着按钮，标签上有标签。

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

我如何交换这两个位置，在子组件上使用float而不会超出父单选按钮，或者可能采用其他方式？

谢谢

Answer 1

你可以这样做

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

Answer 2

<md-radio-button value="1" labelPosition="before" aria-label="Apple"> </md-radio-button>

Answer 3

编辑：

将此添加到您的CSS：

md-radio-button {
  width: 100px;
}

md-radio-button .md-label {
  width: 80%;
  margin-left: 0;
  word-wrap: break-word;
}

md-radio-button .md-container {
  width: 20%;
  left: 100%;
}

您可以在此处设置md-radio-button组件的宽度。这样，无论标签的长度如何，我们都可以对齐所有单选按钮。如果标签真的很长，它们会自动缠绕而不是重叠或按下单选按钮。

第一个答案：

将此添加到您的CSS：

md-radio-button .md-label {
  margin-left: 0;
}

md-radio-button .md-container {
  left: 60px;
}

或者您可以这样做：

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

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

您将需要根据最长的标签来调整left的{{1}}或.md-container的{{1}}的位置。或者，您可以使用最后一种解决方案，而不必关心最小宽度和对齐单选按钮。

这两种解决方案之间的区别在于，在第二种解决方案中，标签将永远不会与单选按钮重叠。最糟糕的是，如果标签真的很长，它将使单选按钮对齐。第一种解决方案不关心标签的长度。

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

3 个答案: