将文本字段标签与复选框标签对齐答案

【问题标题】：Align textfield label with the checkbox label将文本字段标签与复选框标签对齐
【发布时间】：2012-11-10 17:20:34
【问题描述】：

我有一个复选框和两个文本字段。选中该复选框后，将出现两个文本字段（通过 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 做呢？

【问题讨论】：

标签： css checkbox label textfield

【解决方案1】：

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

JSFiddle

【讨论】：

【解决方案2】：

您可以将它们放在同一个 div 中，然后使用 jquery 附加到 div。你会像这样访问 div

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

还有这样的追加

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

如果将第一个字段和第二个字段放在 div 之外并且 div 具有默认宽度 //width = 100% 它将放在您的第一个复选框 div 下方。所以你需要做两件事之一......

使用上面的 jquery 把你的代码放在 100% div 里面
或指定第一个 div 的宽度并将其旁边的项浮动这方面的例子是

////浮动是可选的

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

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

【讨论】：