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

【问题标题】：How to display two form elements next to eachother?如何将两个表单元素并排显示？
【发布时间】：2020-10-20 18:49:39
【问题描述】：

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

代码：

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

我怎样才能做到这一点？

谢谢

【问题讨论】：

你在使用任何 CSS 库吗？

标签： css forms alignment

【解决方案1】：

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

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

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

【讨论】：

我不推荐!important，因为你已经创建了一个新类，所以只需使用一个好的选择器。
在我对答案的评论中，我解释了为什么我添加了！important。使用它不是最佳实践，也不推荐使用，因为任何好的选择器都不能覆盖 !important。在不知道其他 css 的情况下，我添加了它以确保它可以工作。

【解决方案2】：

尝试在 'form-group' 类选择器中将 'display: block' 更改为 'display: flex'

【讨论】：

【解决方案3】：

div 和 paragraph 元素默认为 block elements。

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

您可以清理您的标记并从表单中完全删除<p> 标记并保留超链接。看看下面的 sn-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>

【讨论】：