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

【问题标题】：Align "Remember Me" and Check Box in same line (CSS issue with Devise)将“记住我”和复选框对齐在同一行（Devise 的 CSS 问题）
【发布时间】：2013-04-08 10:26:49
【问题描述】：

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

【问题讨论】：

使用：vertical-align: middle; display: inline-block; 用于标签和输入元素
@RaraituL - 这段代码看起来不错，标签，.controls { vertical-align: middle;显示：内联块；但是如何在标签和文本字段i.imgur.com/WkLlBTB.png之间留出一些空间？
将margin-left: 10px; 添加到标签元素
@RaraituL - 谢谢，这是当前代码jsfiddle.net/icyborg7/Rxyf2，它正在工作，但如何在页面中心对齐文本框和标签？现在他们在左边
在
元素中添加带有控件的每一行，并将 text-align: center; 添加到该
元素中。我认为如果你能从w3schools 做 css 教程来有一个最低限度的了解，这会对你有很大帮助。

标签： css ruby-on-rails ruby-on-rails-3

【解决方案1】：

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

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

【讨论】：

将label 包裹在复选框周围实际上是一种巧妙的标记：两者之间的关系是明确的，并且您可以通过使整个内容可点击来更轻松地更改输入值。 Bootstrap 也使用它。
@MassivePenguin - 感谢代码正常工作，但仍然存在较小的对齐问题i.imgur.com/WkLlBTB.png，您能告诉我如何解决吗？我正在使用引导程序，看起来内联块代码需要更多的东西
@CherryFlavourPez - 您好，代码有效，但仍有轻微的对齐问题i.imgur.com/WkLlBTB.png，您能告诉我如何解决吗？我正在使用引导程序，看起来内联块代码需要更多的东西

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

.boolean, .controls{
    float: left;
}

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

【讨论】：

谢谢，这段代码标签看起来不错，.controls { vertical-align: middle;显示：内联块；但是如何在标签和文本字段 i.imgur.com/WkLlBTB.png 之间留出一些空间？
谢谢，这是当前代码jsfiddle.net/icyborg7/Rxyf2，它可以工作，但是如何对齐页面中心的文本框和标签？现在他们在左边

【解决方案4】：

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

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

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

修复：

将input#user_remember_me 的width & height 设置为15px 和tada，如果包裹在spans 中，标签将出现在同一行。

【讨论】：