在输入元素下方显示输入标签

Question

我一直在尝试在输入元素下面显示一个标签，如下所示：http://www.appnitro.com/demo/view.php?id=7

我已经能够获得下面的标签，但是使用我当前的方法，我不能在同一行上有多个输入，就像我链接的那样。

最好和最干净的方法是什么？

这是我目前的代码：http://jsfiddle.net/6znGU/

Answer 1

您可以通过查看您提供的示例的来源来查看它。将每个input及其label放入已设置span的{​​{1}}。

见这里：http://jsfiddle.net/Ab9hv/

顺便说一句，您可以将float: left放在input内，然后您就不需要label属性。

for

新代码：http://jsfiddle.net/QwDmr/

Answer 2

尝试添加一些div。一个div用于创建输入和标签行，以及行内每对的div，因此它们可以浮动而不会清除它们左侧和右侧的对象。使用保证金来隔离它们。

<div class="rowOfFields">
    <div style="float:left">
          <input type="text" name="fn" id="" />
          <label for="fn">First</label>
    </div>
    <div style="float:left">
          <input type="text" name="ln" id="" />
          <label for="ln">Last</label>
    </div>
</div>

Answer 3

你在那个例子中得到了解决方案。您需要将label input组合包装到div元素中，然后将其浮动或使其成为内嵌元素。

在JSFiddle上查看。

希望这有帮助！