ASP.Net 添加 padding/positioning 时核心模型绑定表单被压扁

Question

我在尝试格式化页面、添加 header 并将其余内容向下移动 10% 的屏幕时遇到问题，这样标题就不会隐藏在下面我放入的 header。此 CSS 适用于其他页面，只需将内容向下移动 10%（我也尝试使用填充）：

.content{
    position: absolute;
    top: 10%;
}

然而，当我将它放入这个特定的表单时，它会挤压我所有的表单元素 Picture of Squished form elements。我不太确定是什么原因造成的，因为我只是想在表格上方添加 space。

这是该 .cshtml 页面上的表单代码（此表单是 Visual Studios 2019 的 90% pre-generated 代码，在 <div class="content"> 标记之前工作）：

<div class="content">
            <div class="row">
                <div class="col-md-4">
                    <form asp-action="Edit">
                        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                        <input type="hidden" asp-for="@Model.id" class="form-control" />

                        <div class="form-group">
                            <label asp-for="FirstName" class="control-label"></label>
                            <input asp-for="FirstName" class="form-control" value="@Model.FirstName" />
                            <span asp-validation-for="FirstName" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="LastName" class="control-label"></label>
                            <input asp-for="LastName" class="form-control" value="@Model.LastName" />
                            <span asp-validation-for="LastName" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="Username" class="control-label"></label>
                            <input asp-for="Username" class="form-control" value="@Model.Username" />
                            <span asp-validation-for="Username" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="Password" class="control-label"></label>
                            <input asp-for="Password" class="form-control" value="@Model.Password" />
                            <span asp-validation-for="Password" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="StreetAddress" class="control-label"></label>
                            <input asp-for="StreetAddress" class="form-control" value="@Model.StreetAddress" />
                            <span asp-validation-for="StreetAddress" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="City" class="control-label"></label>
                            <input asp-for="City" class="form-control" value="@Model.City" />
                            <span asp-validation-for="City" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="State" class="control-label"></label>
                            <input asp-for="State" class="form-control" value="@Model.State" />
                            <span asp-validation-for="State" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="ZipCode" class="control-label"></label>
                            <input asp-for="ZipCode" class="form-control" value="@Model.ZipCode" />
                            <span asp-validation-for="ZipCode" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="ApprovalStatus" class="control-label"></label>
                            <input asp-for="ApprovalStatus" class="form-control" value="@Model.ApprovalStatus" />
                            <span asp-validation-for="ApprovalStatus" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <input type="submit" value="Save" class="btn btn-primary" />
                            <input type="reset" value="Cancel" class="btn btn-primary" asp-action="ManageVolunteers" />
                        </div>
                    </form>
                </div>
            </div>

            <div>
                <a asp-action="Landing">Back to List</a>
            </div>
        </div>

仅供参考：此页面上剩余的 html（表格正上方）。

        <div class="header">
            <img src="~/Images/BitworksLogo.png" id="header-img" />
            <h2>Volunteer Management System</h2>
        </div>

        <h1>Edit</h1>

        <hr />

编辑：我现在已经在相同性质的多种形式上进行了尝试（ASP.Net-core .cshtml model-bound 形式）同样的模式也发生在那些字段和标签上，就它们被压扁而言。这是可能的，但在 model-bound 形式之间吗？有没有另一种方法可以显示相同的输出？

Answer 1

它可能会收缩，因为内容 class 具有绝对定位，但没有全宽的父元素。您可以简单地将属性 width: 100%; 添加到 .content class 然后它看起来更正常。

但是在这种情况下，您可以（并且可能应该）避免一起使用绝对位置。

更好的方法是将页眉设置为固定高度并从内容中删除位置属性。

.header {
  height: 100px;
}
.content {
 // removed all properties. 
}

现在这会导致页眉和内容相对定位，因此它们将相互堆叠。

ASP.Net 添加 padding/positioning 时核心模型绑定表单被压扁

ASP.Net Core model bound form squished when padding/positioning is added

html

css

forms

styling

asp.net-core-mvc