Question

我有一个复选框和两个文本字段。选中该复选框后，将显示两个文本字段（通过jquery代码）。我希望两个标签“First field”和“Second field”与标签“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

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

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

并像这样追加

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

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

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

////浮动是可选的

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

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

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

2 个答案: