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

这是一个例子

Answer 2

这是一个选项：

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

.radio {
    float: left;
}

.radio_label {
    display: block;
    margin-left: 1.5em;
}
</style>
<div class="leftBlock">
    <input type="radio" name="foo" value="bar" id="option" class="radio"/>
    <span class="radio_label">
    This is a rather long supporting text that does not fit in
    one line.
    </span>
</div>

您将标签转换为具有左边距的浮动块元素。

Answer 3

您可以通过更改该输入的class或id中的属性top来更改输入的垂直级别，此处代码为：

<style type="text/css">
    .main {
        height:50px;
        line-height:50px;
        font-size:25px;
        position:relative;
    }

    .rd {
        position:inherit;
        top:-2px;
    }
</style>

<div id="main">
    <input type="radio" id="rd" />
    This is a rather long supporting text that does not fit in one line.
</div>