HTML INPUT无线电元素文本的CSS对齐方式

Question

我有一个input[type="radio"]固定宽度的块容器内的元素.<input/>元素的支持文本不适合单行,并且落在两行或更多行上.例如:

div.leftBlock {
  position: relative;
  float: left;
  width: 275px;
}

<div class="leftBlock">
  <input type="radio" name="foo" value="bar" id="option" /> This is a rather long supporting text that does not fit in one line.
</div>

我如何设置<input/>元素(或其文本)的样式,使文本所属的每一行都从第一行的同一缩进级别开始？第一行文本必须与<input/>元素处于同一垂直级别.

任何帮助都感激不尽.

Answer 1

容器可以使用正左padding和负text-indent.

.leftBlock {
    padding-left: 20px;
    text-indent: -20px;
}
.leftBlock input {
    width: 20px;
}

这是一个例子