0

我有一个复选框和两个文本字段。当复选框被选中时，会出现两个文本字段（通过 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做到这一点？

4

2 回答 2

0

您可以将它们放在同一个 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;
//}
于 2012-11-10T17:29:36.097 回答
0 
#mydiv div { 
    padding-left: 16px;
}

​JSFiddle

于 2012-11-10T17:25:39.420 回答