CSS-在标签和复选框之间创建空间



我正在尝试在标签和复选框之间创建空间。如果我使用类.Test,那么它会在所有项目的标签和复选框之间产生很大的间隙。但我想保留第一个项目,但在第二个和第三个标签中创造空间。我试过label>#test1Label,但它不起作用。我也试过#test1Label,但还是没用。

JavaScript

$(".Test").parent().css({"width":"160px","height":"25px"});

$("label>#test1Label").css({"width":"550px","height":"25px"});

$("label>#test2Label").css({"width":"550px","height":"25px"});

HTML

<tr>
<td nowrap="" style="width: 160px; height: 25px;">
<span class="Test">
<label for="Test1" id="Test1Label" style="border: 1px solid rgb(204, 204, 204); border-radius: 3px; padding: 2px;">Testing &nbsp; </label>
</span>
</td>
<td align="left" width="100%" id="TD1">
<input class="pro" type="CHECKBOX" name="ob" value="Ind" id="pro" onclick="" autocomplete="off">
</td>
</tr>
<tr>
<td nowrap="" style="width: 160px; height: 25px;">
<span class="Test">
<label for="Test2" id="Test2Label" style="border: 1px solid rgb(204, 204, 204); border-radius: 3px; padding: 2px;">Please select Testing 1 &nbsp; </label>
</span>
</td>
<td align="left" width="100%" id="TD1">
<input class="pro" type="CHECKBOX" name="ob" value="Ind1" id="pro" onclick="" autocomplete="off">
</td>
</tr>
<tr>
<td nowrap="" style="width: 160px; height: 25px;">
<span class="Test">
<label for="Test3" id="Test3Label" style="border: 1px solid rgb(204, 204, 204); border-radius: 3px; padding: 2px;">Please select Testing 2 from  &nbsp; </label>
</span>
</td>
<td align="left" width="100%" id="TD1">
<input class="pro" type="CHECKBOX" name="ob" value="Ind2" id="pro" onclick="" autocomplete="off">
</td>
</tr>

尝试添加一个新的<td>元素,其中div位于输入和标签之间,如下所示:

<td nowrap="" style="width: 160px; height: 25px;">
<span class="Test">
<label for="Test2" id="Test2Label" style="border: 1px solid rgb(204, 
204, 204); border-radius: 3px; padding: 2px;">Please select Testing 1 
&nbsp; </label>
</span>
<td>
<div class="label-space"></div>
</td>
<td align="left" width="100%" id="TD1">
<input class="pro" type="CHECKBOX" name="ob" value="Ind1" id="pro" 
onclick="" autocomplete="off">
</td>

然后通过css向div添加宽度:

$(".label-space").css({"width":"15px"})

相关内容

  • 没有找到相关文章

最新更新