如何交换标签和单选按钮位置材料AngularJS答案

【问题标题】：How to swap label and radio button position Material AngularJS如何交换标签和单选按钮位置材料AngularJS
【发布时间】：2015-03-31 17:06:15
【问题描述】：

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。

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

谢谢

【问题讨论】：

标签： angularjs angularjs-directive material-design angular-material

【解决方案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>

【讨论】：

这消除了单击文本以检查单选按钮的能力。

【解决方案2】：

编辑：

将此添加到您的 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;
}

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

我在 API 文档中找不到任何 labelPosition。