Html 表单标签换行符答案

【问题标题】：Html form label line breaksHtml 表单标签换行符
【发布时间】：2013-04-07 06:41:57
【问题描述】：

我需要一个 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/

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

我该怎么做？

【问题讨论】：

“在顶部”是指占位符吗？ jsfiddle.net/A8RaG/1

标签： html css forms twitter-bootstrap

【解决方案1】：

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

【讨论】：

嗯不是想死，但这里有一个打字错误，我确实在搜索中找到了这个，所以应该更正它：inline-bloc to inline-block
我认为你提到了 inline-block;

【解决方案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>

简单不？

【讨论】：

【解决方案3】：

另一种解决方案是在每个标签/输入组合周围放置一个 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

【讨论】：

jsfiddle 看起来像问题中的原始代码..？

【解决方案4】：

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

【讨论】：