Блог

У меня возникают проблемы с этой конкретной формой, когда дело доходит до попытки форматирования страницы, добавления заголовка и перемещения остального содержимого вниз на 10% экрана, чтобы заголовки не были скрыты под заголовком, который я добавляю. Этот CSS работает должным образом для других страниц, просто перемещая содержимое вниз на 10% (я также пробовал использовать отступы):

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

однако, когда я помещаю ее в эту конкретную форму, она сжимает все мои элементы формы, изображение сжатых элементов формы. Я не совсем уверен, что могло бы быть причиной этого, поскольку я просто пытаюсь добавить пробел над формой.

Вот код формы на этой странице .cshtml (эта форма на 90% состоит из предварительно сгенерированного кода Visual Studios 2019 и работает до <div class="content"&&t; тега):

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

                        <div class="form-&roup"&&t;
                            <label asp-for="FirstName" class="control-label"&&t;</label&&t;
                            <input asp-for="FirstName" class="form-control" value="@Model.FirstName" /&&t;
                            <span asp-validation-for="FirstName" class="text-dan&er"&&t;</span&&t;
                        </div&&t;
                        <div class="form-&roup"&&t;
                            <label asp-for="LastName" class="control-label"&&t;</label&&t;
                            <input asp-for="LastName" class="form-control" value="@Model.LastName" /&&t;
                            <span asp-validation-for="LastName" class="text-dan&er"&&t;</span&&t;
                        </div&&t;
                        <div class="form-&roup"&&t;
                            <label asp-for="Username" class="control-label"&&t;</label&&t;
                            <input asp-for="Username" class="form-control" value="@Model.Username" /&&t;
                            <span asp-validation-for="Username" class="text-dan&er"&&t;</span&&t;
                        </div&&t;
                        <div class="form-&roup"&&t;
                            <label asp-for="Password" class="control-label"&&t;</label&&t;
                            <input asp-for="Password" class="form-control" value="@Model.Password" /&&t;
                            <span asp-validation-for="Password" class="text-dan&er"&&t;</span&&t;
                        </div&&t;
                        <div class="form-&roup"&&t;
                            <label asp-for="StreetAddress" class="control-label"&&t;</label&&t;
                            <input asp-for="StreetAddress" class="form-control" value="@Model.StreetAddress" /&&t;
                            <span asp-validation-for="StreetAddress" class="text-dan&er"&&t;</span&&t;
                        </div&&t;
                        <div class="form-&roup"&&t;
                            <label asp-for="City" class="control-label"&&t;</label&&t;
                            <input asp-for="City" class="form-control" value="@Model.City" /&&t;
                            <span asp-validation-for="City" class="text-dan&er"&&t;</span&&t;
                        </div&&t;
                        <div class="form-&roup"&&t;
                            <label asp-for="State" class="control-label"&&t;</label&&t;
                            <input asp-for="State" class="form-control" value="@Model.State" /&&t;
                            <span asp-validation-for="State" class="text-dan&er"&&t;</span&&t;
                        </div&&t;
                        <div class="form-&roup"&&t;
                            <label asp-for="ZipCode" class="control-label"&&t;</label&&t;
                            <input asp-for="ZipCode" class="form-control" value="@Model.ZipCode" /&&t;
                            <span asp-validation-for="ZipCode" class="text-dan&er"&&t;</span&&t;
                        </div&&t;
                        <div class="form-&roup"&&t;
                            <label asp-for="ApprovalStatus" class="control-label"&&t;</label&&t;
                            <input asp-for="ApprovalStatus" class="form-control" value="@Model.ApprovalStatus" /&&t;
                            <span asp-validation-for="ApprovalStatus" class="text-dan&er"&&t;</span&&t;
                        </div&&t;
                        <div class="form-&roup"&&t;
                            <input type="submit" value="Save" class="btn btn-primary" /&&t;
                            <input type="reset" value="Cancel" class="btn btn-primary" asp-action="Mana&eVolunteers" /&&t;
                        </div&&t;
                    </form&&t;
                </div&&t;
            </div&&t;

            <div&&t;
                <a asp-action="Landin&"&&t;Back to List</a&&t;
            </div&&t;
        </div&&t;
  

К вашему сведению: оставшийся HTML-код на этой странице (непосредственно над формой).

         <div class="header"&&t;
            <im& src="~/Ima&es/BitworksLo&o.pn&" id="header-im&" /&&t;
            <h2&&t;Volunteer Mana&ement System</h2&&t;
        </div&&t;

        <h1&&t;Edit</h1&&t;

        <hr /&&t;
  

Редактировать: теперь я попробовал это на нескольких формах одинаковой природы (формы, привязанные к модели ASP.Net-core .cshtml), и тот же шаблон происходит с этими полями и метками с точки зрения их сжатия. Возможно ли это, но между самими формами, привязанными к модели? Есть ли другой способ, который работает и показывает тот же результат?

Вероятно, она сжимается из-за того, что класс content имеет абсолютное позиционирование, но не имеет родительского элемента полной ширины. Вы могли бы просто добавить свойство width: 100%; в .content класс, и тогда это выглядело бы более нормально.

Но в этом случае вы можете (и, вероятно, должны) избегать использования абсолютной позиции все вместе.

Лучшим способом было бы установить для заголовка фиксированную высоту и удалить свойство position из содержимого.

 .header {
  hei&ht: 100px;
}
.content {
 // removed all properties. 
}
  

Теперь это приводит к тому, что заголовок и содержимое располагаются относительно друг друга, и поэтому они будут накладываться друг на друга.