CSS 和 HTML 标题在网页上错位

问题描述 投票：0回答：1

与 

<h2>Personal information<h2>
不同，它完美地显示了我希望它如何显示页面上错位的 
<h2>Emergency contact<h2>
 标题。 
<h2>
 的 CSS 位于下面的 CSS 文件夹中：

<section class="personal-info">
                <h2>PERSONAL INFORMATION</h2>
                <form>

                    @*get firstname and last name to alighn with the other textboxes also make them fill the page*@

                    <label for="FirstName">First Name</label>
                    @Html.TextBoxFor(x => x.FirstName, new { @class = "form-control", id = "FirstName", placeholder = "Enter First Name" })

                    <div class="form-row col-lg-10">
                        <label for="LastName">Last Name</label>
                        @Html.TextBoxFor(x => x.LastName, new { @class = "form-control", id = "LastName", placeholder = "Enter Last Name" })
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="ID_Number">ID Number</label>
                            @Html.TextBoxFor(x => x.ID_Number, new { @class = "form-control", id = "ID_Number", placeholder = "Enter ID Number" })
                        </div>
                        <div class="form-group col-md-6">
                            <label for="DateOfBirth">Date Of Birth</label>
                            @Html.TextBoxFor(x => x.DateOfBirth, "{0:dd/MM/yyyy}", new { @class = "form-control datepicker", id = "DateOfBirth", placeholder = "DD/MM/YYYY" })
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="dllGetGender">Gender</label>
                            @Html.DropDownListFor(x => x.GenderIDFK, new List<SelectListItem>(), "Select Gender", new { @class = "form-control", id = "dllGetGender" })
                        </div>
                        <div class="form-group col-md-6">
                            <label for="dllPhoneNumber">Phone Number</label>
                            @Html.TextBoxFor(x => x.PhoneNumber, new { @class = "form-control", id = "dllPhoneNumber", placeholder = "Enter Phone Number" })
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="dllEmail">Email</label>
                            @Html.TextBoxFor(x => x.Email, new { @class = "form-control", id = "dllEmail", placeholder = "Enter Email" })
                        </div>
                        <div class="form-group col-md-6">
                            <label for="dllLine1">Address Line 1</label>
                            @Html.TextBoxFor(x => x.Line1, new { @class = "form-control", id = "dllLine1", placeholder = "Enter Address Line 1" })
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="dllLine2">Address Line 2</label>
                            @Html.TextBoxFor(x => x.Line2, new { @class = "form-control", id = "dllLine2", placeholder = "Enter Address Line 2" })
                        </div>
                        <div class="form-group col-md-6">
                            <label for="dllGetCities">City</label>
                            @Html.DropDownListFor(x => x.CityIDFK, new List<SelectListItem>(), "Select City", new { @class = "form-control", id = "dllGetCities" })
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="dllGetProvinces">Province</label>
                            @Html.DropDownListFor(x => x.ProvinceIDFK, new List<SelectListItem>(), "Select Province", new { @class = "form-control", id = "dllGetProvinces" })
                        </div>
                        <div class="form-group col-md-6">
                            <label for="dllGetCountries">Country</label>
                            @Html.DropDownListFor(x => x.CountryIDFK, new List<SelectListItem>(), "Select Country", new { @class = "form-control", id = "dllGetCountries" })
                        </div>
                    </div>

                </form>
            </section>
            
            <hr />
            <section class="emergancy-contact">
                @*get h2 to give only they emergancy contact color *@
                <h2>emergancy contact</h2>
                <form>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="dllGetMaritalStatus">Marital Status</label>
                            @Html.DropDownListFor(x => x.MaritalStatusIDFK, new List<SelectListItem>(), "Select Marital Status", new { @class = "form-control", id = "dllGetMaritalStatus" })
                        </div>

                        <div class="form-group col-md-6">
                            <label for="dllEmergencyName">Emergency Name</label>
                            @Html.TextBoxFor(x => x.EmergencyName, new { @class = "form-control", id = "dllEmergencyName", placeholder
= "Enter Emergency Contact Name" })
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="dllEmergencyLastName">Emergency Last Name</label>
                            @Html.TextBoxFor(x => x.EmergencyLastName, new { @class = "form-control", id = "dllEmergencyLastName", placeholder = "Enter Emergency Contact Last Name" })
                        </div>
                        <div class="form-group col-md-6">
                            <label for="dllEmergencyPhoneNumber">Emergency Phone Number</label>
                            @Html.TextBoxFor(x => x.EmergencyPhoneNumber, new { @class = "form-control", id = "dllEmergencyPhoneNumber", placeholder = "Enter Emergency Contact Phone" })
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="dllRelationship">Relationship</label>
                            @Html.TextBoxFor(x => x.Relationship, new { @class = "form-control", id = "dllRelationship", placeholder = "Enter Relationship" })
                        </div>
                        <div class="form-group col-md-6">
                            <label for="dllEmergancyDateOfBirth">Emergency Contact DOB</label>
                            @Html.TextBoxFor(x => x.EmergancyDateOfBirth, "{0:dd/MM/yyyy}", new { @class = "form-control datepicker", id = "dllEmergancyDateOfBirth", placeholder = "DD/MM/YYYY" })
                        </div>
                    </div>
                </form>
            </section>

以下是CSS代码：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

.form-container {
    width: 70%;
    margin: 30px auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

header {
    background-color: #00796b;
    padding: 20px;
    color: white;
    text-align: center;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    width: 100px;
}

.title h1 {
    font-size: 24px;
    color: #fff;
}

h2 {
    background-color: #004d40;
    color: white;
    padding: 10px;
    font-size: 18px;
}

form {
    margin: 20px 0;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input, select, textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

    input[type="radio"] {
        width: auto;
        margin-right: 10px;
    }

textarea {
    height: 100px;
}

footer {
    margin-top: 30px;
    text-align: center;
}

    footer p {
        font-weight: bold;
    }

address {
    font-style: normal;
}

.signature p {
    font-size: 18px;
    font-style: italic;
    margin-top: 10px;
}

这是页面：enter image description here

html css forms
1个回答
0
投票

为了解决这个问题，我们需要一个可运行的代码片段。这是我从您的模板代码中派生的可运行片段，但它似乎没有复制问题。我建议您将此片段复制到您的帖子中，然后对其进行编辑，直到它重现问题。

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 1em;
}

.form-container {
  width: 70%;
  margin: 30px auto;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

header {
  background-color: #00796b;
  padding: 20px;
  color: white;
  text-align: center;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  width: 100px;
}

.title h1 {
  font-size: 24px;
  color: #fff;
}

h2 {
  background-color: #004d40;
  color: white;
  padding: 10px;
  font-size: 18px;
}

form {
  margin: 20px 0;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input, select, textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type="radio"] {
  width: auto;
  margin-right: 10px;
}

textarea {
  height: 100px;
}

footer {
  margin-top: 30px;
  text-align: center;
}

footer p {
  font-weight: bold;
}

address {
  font-style: normal;
}

.signature p {
  font-size: 18px;
  font-style: italic;
  margin-top: 10px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<section class="personal-info">
  <h2>PERSONAL INFORMATION</h2>
  <form>

    <label for="FirstName">First Name</label>
    <input id="FirstName" type="text">
    
    <div class="form-row col-lg-10">
      <label for="LastName">Last Name</label>
      <input id="LastName" type="text">
    </div>

    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="ID_Number">ID Number</label>
        <input id="ID_Number" type="text">
      </div>
      <div class="form-group col-md-6">
        <label for="DateOfBirth">Date Of Birth</label>
        <input id="DateOfBirth" type="date">
      </div>
    </div>

    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="dllGetGender">Gender</label>
        <select id="dllGetGender"></select>
      </div>
      <div class="form-group col-md-6">
        <label for="dllPhoneNumber">Phone Number</label>
        <input id="dllPhoneNumber" type="text">
      </div>
    </div>
  </form>
</section>

<hr>

<section class="emergency-contact">
  <h2>emergency contact</h2>
  <form>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="dllGetMaritalStatus">Marital Status</label>
        <select id="dllGetGender"></select>
      </div>
      <div class="form-group col-md-6">
        <label for="dllEmergencyName">Emergency Name</label>
        <input id="dllEmergencyName" type="text">
      </div>
    </div>

    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="dllEmergencyLastName">Emergency Last Name</label>
        <input id="dllEmergencyLastName" type="text">
      </div>
      <div class="form-group col-md-6">
        <label for="dllEmergencyPhoneNumber">Emergency Phone Number</label>
        <input id="dllEmergencyPhoneNumber" type="text">
      </div>
    </div>

    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="dllRelationship">Relationship</label>
        <input id="dllEmergencyPhoneNumber" type="text">
      </div>
      <div class="form-group col-md-6">
        <label for="dllEmergancyDateOfBirth">Emergency Contact DOB</label>
        <input id="dllEmergancyDateOfBirth" type="date">
      </div>
    </div>
  </form>
</section>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.