css - 标签显示在复选框下方

Question

<%= f.check_box :openid_enabled %>
<%= f.label :openid_enabled, 'OpenID' %>

上面的代码生成这个 HTML

<input type="hidden" value="0" name="application[openid_enabled]">
<input type="checkbox" value="1" name="application[openid_enabled]" id="application_openid_enabled">
<label for="application_openid_enabled">OpenID</label>

并且标签显示为

[x]
OpenID

代替

[x] OpenID

我是否需要对其进行样式设置或 rails helpers 有一些内置功能？

添加

我在我的 Rails 应用程序中使用twitter bootstrap CSS 框架。

Answer 1

这一定会发生，因为要么 要么input设置label为display: block;您可以通过使这些元素在一行中显示它inline-

input, label{ display: inline; }

Answer 2

我使用以下方法解决了这个问题，而没有覆盖 twitter bootstrap css 的风格。

<%= f.label :openid_enabled, class: 'checkbox' do %>
  <%= f.check_box :openid_enabled %>
  OpenID
<% end %>

生成以下HTML

<label for="application_openid_enabled" class="checkbox">
  <input type="hidden" value="0" name="application[openid_enabled]">
  <input type="checkbox" value="1" name="application[openid_enabled]" id="application_openid_enabled">
  OpenID
</label>

这是参考http://twitter.github.com/bootstrap/base-css.html

感谢@MyHeadHurts 和@Dipaks 的宝贵意见。

Answer 3

我知道它很旧，但今天最好的方法是使用标签上的checkbox-inline 类。