Question

这是我正在尝试做的事情 - 我想'忘记密码？'与“记住我”在同一行显示，就像在图像中一样。我正在使用simple_form gem，而且它确实搞砸了 - 我的意思是，通常我会把'display：inline'放在我的'忘记密码'div中，或者我会把它变成一个跨度，它会显示确定，我敢肯定，但不是在这种情况下。谢谢你的帮助！

enter image description here

这是我的代码：

<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;
}

Answer 1

你可以让链接浮动在右侧。

.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>

希望它对你有所帮助。

Answer 2

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

我使用的解决方案是为“记住我”添加一个新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>更改为<div class>，它看起来还不错。

当你看到它时，这么简单！

Answer 3

试试这个： -

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

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

Answer 4

这只是猜测。

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

您需要修改宽度px。

Answer 5

使用display:inline;来记住我的输入或使用float:left;和float:right;

Answer 6

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

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

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

试图在同一行显示元素

6 个答案: