將textfield標籤與複選框標籤對齊

Question

我有一個複選框和兩個文本字段。當複選框被選中時，兩個文本框出現（通過jQuery代碼）。我希望將兩個標籤「第一個字段」和「第二個字段」與標籤「MyCheckbox」對齊，或者，在某種程度上，兩個文本字段標籤應該相對於複選框的級別縮進。 這是我的html代碼：

<div> 
<input type="checkbox" name="mycheckbox">&nbsp;MyCheckbox 
</div> 
<div id="mydiv"> 
    <div><label>First field</label> 
    <input type="text" name="first_field" value=""> 
    </div> 
    <div><label>Second field</label> 
    <input type="text" name="second_field" value=""> 
    </div> 
</div> 

我怎麼能與CSS做呢？

Answer 1

#mydiv div { 
    padding-left: 16px; 
} 

JSFiddle

Answer 2

你可以把它們放在同一格內，並使用jquery追加到div。你會訪問DIV這樣

$('input[name=mycheckbox]').parent() 

像這樣

$('input[name=mycheckbox]').parent().append($('#mydiv').html()); 

如果你把第一場和第二場的div外部和div有一個默認的寬度//寬=追加100％ 它將放在您的第一個複選框div下方。所以，你需要做兩件事情之一......

• 使用上述jQuery來把你的代碼中的100％的div

• 內或指定的第一個div的寬度和浮動的項目旁邊它這樣的一個 例子

////浮子是可選

//div{ 
//width: 50%; 
//float:left; 
//} 

//#mydiv{ 
//width: 50%; 
//float:left; 
//}