Question

我正在使用Devise，复选框位于Remember Me下方。以下是jsfiddle http://jsfiddle.net/icyborg7/8zxyz/

上的HTML代码

这是标准设计代码

 <%= 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

在display: inline-block和label上添加.controls可获得您想要的结果：

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

Answer 2

我遇到了同样的问题，这可能比其他人建议的解决方案（使用simple_form为我工作）更清洁了

<%= f.input :remember_me, :as => :boolean, :label => false, :inline_label => true if devise_mapping.rememberable? %>

Answer 3

尝试像这样漂浮您的内容：http://jsfiddle.net/8zxyz/3/ Css：

.boolean, .controls{
    float: left;
}

此外，您可以在清除内容后立即创建重置div。

Answer 4

我知道这个问题刚才被问过，但我想出了我遇到的问题，我希望它可以帮助其他正在寻找的人。

我注意到，在我的某个css文件中，表单的input设置为width: 100%。

因此，无论我如何尝试布局HTML，都会导致标签始终位于另一条线上。

修复：

将width & height的{{1}}设置为input#user_remember_me和tada，标签如果以跨度包装将显示在同一行。

将“记住我”和复选框对齐在同一行（与Devise的CSS问题）

4 个答案: