Question

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

代码：

.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

尝试在“ form-group”类选择器中将“ display：block”更改为“ display：flex”

Answer 2

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

由于您多次使用！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>

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>

如何彼此相邻显示两个表单元素？

3 个答案: