1

这就是我想要做的 - 我想要“忘记密码？” 与“记住我”出现在同一行，如图所示。我正在使用 simple_form gem，它真的把事情搞砸了——我的意思是，通常我会把 'display:inline' 放在我的 'forget your password' div 中，或者我会把它变成一个跨度，它会出现好，我敢肯定，但不是在这种情况下。谢谢你的帮助！

在此处输入图像描述

这是我的代码：

<div class='sign-in-section'>

          <%= simple_form_for(User.new, :as => :user, :url => session_path(:user), :html => {}) do |f| %>

            <div class="inputs">
    <%= f.input_field :email, :required => false, :autofocus => true, :placeholder => I18n.t('sign_in.email_address_placeholder') %>
              <br/>
              <%= f.input_field :password, :required => false,  :placeholder => I18n.t('sign_in.password_placeholder') %>
              <%= f.input :remember_me, :as => :boolean, :label => false, :inline_label => 'Remember me' %>
              <div class='links'>
              <%= link_to I18n.t('sign_in.forgot_password'), new_user_password_path %>
              </div>
            </div>

   </br>
   <span class="actions"><%= f.button :submit, I18n.t('sign_in.sign_in_button'), :class => 'btn btn-primary' %>

              <%= link_to I18n.t('sign_in.sign_up_button'), new_user_registration_path, :class => "btn btn-warning" %>

          <% end %>
        </span>

    </div>

我的链接 div css 是这样的（也许 simple_form 有一种方法，我什至不需要其中的 div？）：

.sign-in-section .links {
    display:inline;
}
4

6 回答 6

3

您可以使链接浮动在右侧。

.sign-in-section .links {
    display:inline;
    float: right;
}

如果这将链接放在记住我的下方，那么您需要重新排序 html 元素，如下所示

<div class="inputs">
    <%= f.input_field :email, :required => false, :autofocus => true, :placeholder => I18n.t('sign_in.email_address_placeholder') %>
    <br/>
    <div class='links'>
        <%= link_to I18n.t('sign_in.forgot_password'), new_user_password_path %>
    </div>
    <%= f.input_field :password, :required => false,  :placeholder => I18n.t('sign_in.password_placeholder') %>
    <%= f.input :remember_me, :as => :boolean, :label => false, :inline_label => 'Remember me' %>

</div>

希望它可以帮助你。

于 2013-09-12T10:34:27.130 回答
1

感谢你的帮助。他们让我走上了正轨；在我根据您所说的解决我的解决方案时更新了一些答案，所以为时间和精力欢呼。使用您的一些解决方案，我得到了“忘记密码？” 在右边，好的，但它在“记住我”的右下方。

我使用的解决方案是为“记住我”添加一个新的 div，然后为“忘记密码？”添加另一个 div，如下所示：

      <div class='links1'>
      <%= f.input :remember_me, :as => :boolean, :label => false, :inline_label => 'Remember me' %>
      </div>
      <div class='links'>
      <%= link_to I18n.t('sign_in.forgot_password'), new_user_password_path %>
      </div>

在我的 CSS 中：

.links1 {
  float:left;
}

.links {
  float:right;
}

出于某种原因，它把我的“登录”和“注册”按钮扔到了不合适的位置，但我把我<span class>的改为 a <div class>，它看起来又没问题了。

当你看到它完成时，如此简单！

于 2013-09-12T11:36:07.293 回答
0

包装“忘记密码”链接的div元素呈现为块元素。您可以使用 css 属性覆盖它：

<div class='links' style='display:inline;'>
<%= link_to I18n.t('sign_in.forgot_password'), new_user_password_path %>
</div>

考虑将属性添加到类“链接”的 css 样式或定义另一个 css 类，例如。'内联'。

于 2013-09-12T10:36:23.770 回答
0

尝试这个：-

.sign-in-section .links,
.sign-in-section .inputs  {
    display:inline;
}

.sign-in-section .links  {
   float: right;
}
于 2013-09-12T10:34:17.423 回答
0

这只是一个猜测。

.sign-in-section .links {
    width: 350px;
    float: right;
}

您需要修改宽度 px。

于 2013-09-12T10:35:24.680 回答
0

也用于display:inline;记住我的输入或使用float:left;andfloat:right;

于 2013-09-12T10:35:42.373 回答