编辑:
将此添加到您的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-container
min-width
.md-label
这两种解决方案之间的区别在于,在第二种解决方案中,标签永远不会与单选按钮重叠。在最坏的情况下,如果标签真的很长,它会使单选按钮错位。第一个解决方案不关心标签的长度。