2

Material Angular 会像这样布置单选框：

o Apple
o Banana

我想要这个反过来

Apple  o
Banana o

md-radio-button 有两个组件，

div class="md-container",

和

div 类 =“md 标签”。

容器容纳按钮，标签容纳标签。

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

如何交换这两个位置，或者在子组件上使用浮动而不打破父单选按钮之外，或者可能是其他方式？

谢谢

4

3 回答 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>
于 2015-04-01T15:13:14.783 回答
0

编辑：

将此添加到您的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位置。或者您可以使用最后一个解决方案，而不关心最小宽度和对齐单选按钮。.md-containermin-width.md-label

这两种解决方案之间的区别在于，在第二种解决方案中，标签永远不会与单选按钮重叠。在最坏的情况下，如果标签真的很长，它会使单选按钮错位。第一个解决方案不关心标签的长度。

于 2019-03-26T15:09:30.963 回答
-1 
<md-radio-button value="1" labelPosition="before" aria-label="Apple"> </md-radio-button>
于 2019-03-26T14:29:38.347 回答