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>