css - テキストフィールドのラベルをチェックボックスのラベルに揃えます

Question

チェックボックスと 2 つのテキスト フィールドがあります。チェックボックスをオンにすると、2 つのテキストフィールドが表示されます (jquery コード経由)。「最初のフィールド」と「2番目のフィールド」という2つのラベルを「MyCheckbox」というラベルに揃えるか、何らかの方法で、2つのテキストフィールドのラベルをチェックボックスのレベルに対してインデントする必要があります。これは私の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;
}

JSFミドル

Answer 2

それらを同じ div 内に配置し、jquery を使用して div に追加できます。このようにdivにアクセスします

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

そして、このような追加

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

最初のフィールドと 2 番目のフィールドを div の外に配置し、div の幅がデフォルトの //width = 100% の場合、最初のチェックボックス div の下に配置されます。したがって、次の2つのいずれかを行う必要があります...

• 上記の jquery を使用して、コードを 100% div 内に配置します。

• または、最初の div の幅を指定し、その隣の項目をフロートします。この例は次のとおりです。

////フロートはオプションです

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

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