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

我有一个注册表，使用

字段集

将

输入

字段分为两行

现在我需要在它们下面添加一个复选框。当然，我可以使用

div

，但是我想将它集成到

字段集中


我需要在最后一个列表项下添加一个复选框（带有类
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>

我的问题是，我只能在复选框上方获取标签，而不能在复选框旁边获取标签。有人能告诉我如何把标签放在复选框旁边吗？可以更改我的HTML，但请避免使用表。
不确定使用.tc类设置了什么元素的样式，但我只是在复选框后移动了标签，并删除了类
.tandc
的
浮动：对
，看起来就像您试图解释的那样

这就是你要找的吗

编辑

更新的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>

。。。。

标签5



由于您有此
元素的特定类和id，因此您应该能够独立地定位它

编辑

在看到完整的css后，我注意到您指定每个输入字段都显示为块。这意味着没有其他元素可以与输入字段位于同一行，比如div元素（您的复选框就是这些输入字段之一）。您需要做的是指定这个特定的输入框可以有其他元素与之内联。您只需添加到class.tandc或id#tandc
display:inline block
 你好，谢谢你的回答。我有一个问题，我可以看到复选框。标签位于其旁边，距离为5-10px。即使我试图在tac类或tandc中用边距和填充重新协调，我也不能将它们居中到一个高度和一条线。谢谢我不太确定你的问题在哪里，因为在我尝试的每个浏览器中它都是垂直对齐的（我注意到你发布的html中没有class.tc的样式，所以发布完整的表单代码可能会有所帮助）但是看看这个-然后你可以在w3schools的标签或表单标签页面中尝试一下。我的问题只是输入字段下面的复选框。我想有复选框，并直接旁边的一个高度与cb应该是它的标签。我不知道你使用哪种浏览器，请参阅我发布的链接。在我的ff和safari中也有同样的问题。是否有类似于JSFIDLE的图像？然后我可以拍一张快照来说明我的意思，谢谢。我试过了。其实没关系。。。仍然不完美，因为存在以下问题：我可以看到复选框将位于一个类似div的容器中，这是我无法真正找到的度量。这种标签定位似乎比使用简单的div困难得多。在那里，我可以把几乎所有的东西都换到正确的位置。第一件事我不知道如何改变是cb和标签之间的空间。下一件事是如何设置上部输入字段的空间。。。还有很多问题要问。非常感谢。要在css中专门设置cb的属性，您可以使用
.fd input.tac{}
以class
.tandc
来定位标签，您可以使用
position:relative
属性并调整顶部和左侧。要引用上面的输入字段，您应该使用
.fl input
，这都是关于正确引用CSHERE中的元素的，例如！
....
<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>