将文本左右两侧放置到单选框

Question

<div style="left: 300px; position:absolute">
  <label>Radio button Text:<input type="radio"  name="lf-title" value="val"></label>
</div>

代码段显示我的单选按钮的当前位置及其相关文本。 我想将单选按钮设置为父div的左开始位置，并偶尔将单选按钮文本移动到右侧（左对齐）或单选按钮左侧（右对齐）。 （如图所示）

两次应该进行哪些css更改？

Answer 1

您需要在标签left或right中添加一个类，以告诉文本它应该对齐的位置，并将文本包装在span ...中使用{ {1}}左右对齐文字

Stack Snippet

＆＃13;

＆＃13;

transform

＆＃13;

.parent {
  left: 200px;
  position: absolute;
  border-left: 1px solid red;
  font: 13px Verdana;
}

.parent label {
  display: block;
  margin: 0 0 10px;
}

label.left span {
  position: absolute;
  transform: translateX(100%);
}

label.right span {
  position: absolute;
  transform: translateX(-100%);
  padding-right: 10px;
}

＆＃13;

＆＃13;

＆＃13;