html - 将文本左右定位到单选框

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 中...使用transform 将文本左对齐或右对齐

堆栈片段

.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;
}

<div class="parent">
  <label class="left"><span>Text</span><input type="radio"  name="lf-title" value="val"></label>
  <label class="right"><span>Text</span><input type="radio"  name="lf-title" value="val"></label>
  <label class="left"><span>Text</span><input type="radio"  name="lf-title" value="val"></label>
  <label class="right"><span>Text</span><input type="radio"  name="lf-title" value="val"></label>
  <label class="left"><span>Text</span><input type="radio"  name="lf-title" value="val"></label>
  <label class="right"><span>Text</span><input type="radio"  name="lf-title" value="val"></label>
  <label class="left"><span>Text</span><input type="radio"  name="lf-title" value="val"></label>
  <label class="right"><span>Text</span><input type="radio"  name="lf-title" value="val"></label>
</div>