如何并排显示两个表单元素？

Question

我正在尝试创建一个登录表单，我想要复选框“记住我”和 link“密码？”彼此相邻，在当前情况下，它们在彼此下方：

代码：

.form-group {
    display: block !important;
    margin: 0 auto !important;
    max-width: 75% !important;
    margin-bottom: 5% !important;
}

 <div class="form-group">
           <div class="checkbox">
                  <label asp-for="Input.RememberMe">
                      <input asp-for="Input.RememberMe" />
                          @Html.DisplayNameFor(m => m.Input.RememberMe)
                  </label>
            </div>
            <p>
                <a id="forgot-password" asp-page="./ForgotPassword">Password?</a>
            </p>
    </div>

我怎样才能做到这一点？

谢谢

Answer 1

尝试将 'display: block' 更改为 'display: flex' in 'form-group' class selectir

Answer 2

使用内联块。之后使用填充将两者居中。

因为你多次使用!important，所以我在下面的class中也添加了它。

.d-inline-block {
  display: inline-block !important;
}

<div class="form-group">
  <div class="checkbox d-inline-block">
    <label asp-for="Input.RememberMe">
      <input asp-for="Input.RememberMe" />
      @Html.DisplayNameFor(m => m.Input.RememberMe)
    </label>
  </div>
  <div class="d-inline-block">
    <a id="forgot-password" asp-page="./ForgotPassword">Password?</a>
  </div>
</div>

Answer 3

div 和 paragraph 元素默认为 block elements。

为了将这些元素彼此相邻呈现，您需要确保将 div class="checkbox" 设为备选 - 我建议使用 display:inline-block;.

您可以清理标记并从表单中完全删除 <p> 标记，只保留超链接。查看下面的代码段。

.form-group {
    display: block !important;
    margin: 0 auto !important;
    max-width: 75% !important;
    margin-bottom: 5% !important;
}

<div class="form-group">
           <div class="checkbox" style="display:inline-block">
                  <label asp-for="Input.RememberMe">
                      <input asp-for="Input.RememberMe" />
                          @Html.DisplayNameFor(m => m.Input.RememberMe)
                  </label>
            </div>
                <a id="forgot-password" asp-page="./ForgotPassword">Password?</a>
    </div>

如何并排显示两个表单元素？

How to display two form elements next to eachother?

css

forms

alignment