Css 尝试在同一行上显示元素

这就是我要做的——我希望“忘记你的密码”与“记住我”出现在同一行，如图中所示。我使用的是简单的表单gem，它真的把事情搞砸了-我的意思是，通常我会在我的“忘记你的密码”div中加入“display:inline”，或者我会将其放入一个span，它会显示ok，我肯定，但在这种情况下不会。谢谢你的帮助

这是我的密码：

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

试试这个：-

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

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

试试这个：-

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

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

---

您可以使链接在右侧浮动

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

false，：autofocus=>true，：placeholder=>I18n.t（'sign\u in.email\u address\u placeholder'）%>


false，：placeholder=>I18n.t（'sign\u-in.password\u-placeholder'）%>
：boolean，：label=>false，：inline_label=>'记住我'>

---

希望它能帮助您。

您可以使链接在右侧浮动

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

false，：autofocus=>true，：placeholder=>I18n.t（'sign\u in.email\u address\u placeholder'）%>


false，：placeholder=>I18n.t（'sign\u-in.password\u-placeholder'）%>
：boolean，：label=>false，：inline_label=>'记住我'>

希望它能帮助你。

这只是一个猜测

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

您需要修改宽度px。

这只是一个猜测

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

---

您需要修改宽度px。

使用

显示：内联也请记住我的输入
或使用
float:左和<代码>浮动：右侧
使用
显示：内联也请记住我的输入
或使用
float:左和<代码>浮动：右侧
包装“忘记密码”链接的
div
元素呈现为块元素。您可以使用css属性覆盖此属性：

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



考虑将属性添加到类“links”的css样式中，或定义另一个css类，例如“inlined”。
包装“忘记密码”链接的
div
元素呈现为块元素。您可以使用css属性覆盖此属性：

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



考虑将属性添加到类“links”的css样式中，或定义另一个css类，例如“inlined”。
谢谢您的帮助。他们让我走上了正确的道路；在我根据您所说的内容制定解决方案的过程中，一些答案已经更新，因此，为您付出的时间和努力干杯。使用您的一些解决方案，我得到了右侧的“忘记密码”，好的，但它在“记住我”的右侧下方

我使用的解决方案是为“记住我”添加一个新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>

出于某种原因，它将我的“登录”和“注册”按钮扔到了不合适的地方，但我将我的
更改为
，它看起来又正常了

当你看到它完成时，它是如此简单
 谢谢你的帮助。他们让我走上了正确的道路；在我根据您所说的内容制定解决方案的过程中，一些答案已经更新，因此，为您付出的时间和努力干杯。使用您的一些解决方案，我得到了右侧的“忘记密码”，好的，但它在“记住我”的右侧下方

我使用的解决方案是为“记住我”添加一个新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>

出于某种原因，它将我的“登录”和“注册”按钮扔到了不合适的地方，但我将我的
更改为
，它看起来又正常了

当你看到它完成时，它是如此简单
 你能做一个JSFIDLE吗？嗯，不确定你能用rails gems做一个JSFIDLE吗？我会看看，但我不这么认为。你能做一个JSFIDLE吗？嗯，不确定你能用rails gems做一个JSFIDLE吗？我会看的，但我不这么认为。谢谢，你是对的，浮动已经足够了，因为显示已经是内联的。更新了答案。你的建议把它放在右边，好吧，但它在“记住我”的右边下方。正在研究一个解决方案…什么是你的css为记住我？谢谢，你是对的，浮动是足够的，因为显示已经作出内联。更新了答案。你的建议把它放在右边，好吧，但它在“记住我”的右边下方。正在研究一个解决方案…你的css是什么？记住我？