css - 我的 CSS 中的某些东西使我使文本元素出现在其标签下方的一行

Question

我在 Rails 3.2.16 中使用 simple_form_for 并为我的表单使用 Twitter Bootstrap。然而在我所有的表格上。我正在使用 form-horizo​​ntal 类。然而，我所有的文本元素都出现在它们标签的下方和右侧。这是 HTML:

<div class="control-group text optional">
  <label class="text optional" for="user_email">Email</label>
  <div class="controls">
    <input id="user_email" class="text optional" type="text" value="adrian.klingel@myfitment.com" size="30" name="user[email]">
  </div>
</div>

除了屏幕截图，这里是屏幕外观的表示:

Email:
               <Text box for email>

我正在使用 Firebug 来尝试调试。我还没有自定义 CSS。所有设置都从 Bootstrap css 继承。

标签设置为:

display: block;

.form-horizo​​ntal 在 Bootstrap 中有很多设置。

我可以在布局 View 中看到 .controls div 向右填充了 180px。但我不明白是什么迫使它下降。它需要与其标签一致。作为一个有编程背景的人，我无法用语言来形容我对 CSS 的失望。我只是无法得到它。不是因为缺乏尝试。

---

更新:

---

我能够通过将 float:left; 应用于标签来实现我想要的，但我只是有点惊讶打包的 form-horizo​​ntal 类那里已经没有了。我不确定他们认为 form-horizo​​ntal 应该是什么意思。

Answer 1

另一种有用的方法来实现您所说的通过 float: left; 实现的效果是使用 display: inline-block; 代替。

display: block; 强制换行。

在这里阅读更多相关信息: CSS display: inline vs inline-block