css - 将 "Remember Me"和复选框对齐在同一行(Devise 的 CSS 问题)

Question

我正在使用 Devise 并且复选框位于 Remember Me 下方。这是 jsfiddle 上的 HTML 代码 http://jsfiddle.net/icyborg7/8zxyz/

这是标准设计代码

 <%= f.input :email %>
 <%= f.input :password %>
 <%= f.input  :remember_me, :as => :boolean if devise_mapping.rememberable? %>     
 <%= f.button :submit, "Sign In", :class => "btn-info btn" %>

这是 HTML 输出(也将其粘贴到 SO 上)

<div class="control-group boolean optional">
<label class="boolean optional control-label" for="user_remember_me">Remember me</label>
<div class="controls"><input name="user[remember_me]" type="hidden" value="0">
<label class="checkbox"><input class="boolean optional" 
id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"></label>
</div>
</div>

Answer 1

在 label 和 .controls 上添加 display: inline-block 得到你想要的结果:

http://jsfiddle.net/8zxyz/8/