Question

我需要一个带有输入文本框的twitter bootstrap表单，但它的标签必须位于输入框的顶部。

到目前为止，我有：

<form action="#">
  <label for="city">City</label>
  <input type="text" id="city"/>
  <label for="street">Street</label>
  <input type="text" id="street"/>
</form>

http://jsfiddle.net/A8RaG/

所以我需要在同一行上输入，标签必须位于每个输入的顶部。

我该怎么做？

Answer 1

另一个解决方案是在每个标签/输入组合周围放置一个div，并将css设置为向左浮动 HTML

<form action="#">
    <div>
        <label for="city">City</label>
        <input type="text" id="city"/>
    </div>
    <div>
        <label for="street">Street</label>
        <input type="text" id="street"/>
    </div>
</form>

CSS

form div{
   float: left
}

jsFiddle

Answer 2

如果你使用Bootstrap，你需要使用bootstrap的CSS！使用class="form-horizontal" or class="form-inline"

您可以在没有添加CSS的情况下尝试此操作：

<form action="#" class="form-horizontal">
        <label for="city">City</label>
        <input type="text" id="city"/>
        <label for="street">Street</label>
        <input type="text" id="street"/>
</form>

简单没有？

Answer 3

你可以在每个标签和块周围加一个div，然后在css中把这个div放在inline-bloc中

喜欢：

<form action="#">
 <div class = "css">


 <label for="city">City</label>
  <input type="text" id="city"/>
   </div><div class="css">
  <label for="street">Street</label>
  <input type="text" id="street"/>
   </div>
</form>

并在CSS中：

.css{
    display : inline-block;
}

Answer 4

您也可以使用<br />。它也适用于表格。

Html表单标签换行符

4 个答案: