html - Html 表单标签换行符

Question

我需要一个 twitter 引导表单，输入文本框在同一行，但它的标签必须在输入框的顶部。

到目前为止，我有：

<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

您可以在每个标签和块周围放置一个 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 3

你也可以只使用<br />. 它也适用于表单。

Answer 4

如果你使用 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>

简单不？