将复选框的标签放置在字段集中

Question

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

现在，我需要在它们下面添加一个复选框。 当然，我可以使用div来执行此操作，但我想将其集成到fieldset 。

这是一个小提琴的例子。

我需要在最后一个列表项（带有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类设置了什么元素，但​​是我只是将标签移到复选框之后，并删除了.tandc类所具有的float:right ，这看起来就像您要解释的那样。

可能就是您要找的东西吗？

编辑

更新的CSS

.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;
}

html

....
<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>

由于您具有此<li>元素的特定类和ID，因此您应该能够独立定位它。

编辑

看到完整的CSS之后，我注意到您已指定每个输入字段都显示为块。 这意味着没有其他元素可以与div元素一样位于输入字段的同一行（您的复选框是那些输入字段之一）。 您需要做的是指定此特定输入框可以内联其他元素。 您可以只添加到类.tandc或ID #tandc display:inline-block 。