css - 将文本字段标签与复选框标签对齐

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