将复选框的标签定位在字段集中

Question

我有一个注册表单，并使用fieldset在两行中排序input个字段。

现在我需要在它们下方添加一个复选框。当然，我可以使用div这样做，但我想将其整合到fieldset中。

Here is an example fiddle.

我需要在最后一个列表项（带有fd类的列表项）和旁边的下添加一个复选框，即它的标签。

最后，它应该是这样的：

   label 1                         label 2
    _______________                 _______________ 
   (_______________)               (_______________)

    label 3                        label 4
    _______________                 _______________ 
   (_______________)               (_______________)


   (_) label 5 

此时我有以下代码：

...
<li class="fd">
<label class ="tandc">label 5</label>
  <input class="tac"type="checkbox" id="tandc" name="tandc" tabindex="30" autocomplete="off" />
</li>


</ul>
</fieldset>
</form>

至于CSS：

.tc  {
    float: right;
}
.tac {
    width: 20px;
    margin-bottom: 20px;
}


.tandc {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bolder;
    color: #ECECEC;
    text-decoration: none;
    width: 450px;
    float:right;
    margin-right: 25px;
    padding-top: 3px;

}

我的问题是，我只能将标签放在复选框上方而不是旁边。谁能告诉我如何将标签放在复选框旁边？可以更改我的HTML，但请避免使用表格。

Answer 1

不确定使用.tc类设置哪个元素，但我只是在复选框之后移动了标签，并删除了您对课程float:right的{​​{1}}，它看起来就像您要尝试的那样解释

您可能正在寻找这个吗？

修改

更新了css

.tandc

<强> HTML

.tandc {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
color: #ECECEC;
text-decoration: none;
width: 450px;
height: 30px;
display:inline-block;
}

由于您拥有此.... <li class="fd"> <input class="tac"type="checkbox" id="tandc" name="tandc" tabindex="30" autocomplete="off" /> <label class ="tandc">label 5</label> </li> </ul> </fieldset> </form> 元素的特定类和ID，因此您应该能够独立定位它。

修改

看到你的完整CSS后，我注意到你已经指定每个输入字段都显示为块。这意味着没有其他元素可以与输入字段位于同一行，例如div元素（您的复选框是其中一个输入字段）。您需要做的是指定此特定输入框可以包含与其内联的其他元素。您只需添加到.tandc类或id #tandc <li>即可。