4

我正在使用设计，复选框位于记住我的下方。这是 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>
4

4 回答 4

2

添加display: inline-block并label获得.controls您想要的结果：

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

于 2013-04-08T10:30:43.857 回答
2

我遇到了同样的问题，这可能比其他人建议的解决方法要干净一些（使用 simple_form 对我有用）

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

于 2014-03-17T12:31:07.620 回答
1

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

.boolean, .controls{
    float: left;
}

您也可以在清除内容之后创建一个重置 div。

于 2013-04-08T10:31:08.423 回答
0

我知道这个问题是不久前提出的，但我发现了我遇到的问题，我希望它可以帮助其他正在寻找的人。

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

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

修理：

设置to和 tada，标签如果包含在 spans 中将出现在同一行width & height。input#user_remember_me15px

于 2017-09-12T15:24:04.723 回答