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

Question

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

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

CSS：

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

我怎么能够样式化<input/>元素（或它的文本），使得每隔一行文字降到开始在同一缩进级别第一行呢？第一行文本必须与<input/>元素处于同一垂直级别。

任何帮助将不胜感激。

Answer 1

该容器可以使用正向左侧padding和负向text-indent。

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

Here's an example

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>