使用Flexbox实现表单布局时元素错位问题求助

Hey there! Let's break down what's causing your form to misalign and fix it step by step.

First: Fix the HTML Structure Error #

Looking at your code, there's a missing closing </div> tag for the email label container, which is throwing off the entire DOM structure. Here's the broken section:

<div class="label">
 <label for="contact_email">Email address:</label>
 <div>
 <input type="email" id="contact_email" name="contact_email" placeholder="E-mail address">
 </div>

You accidentally nested the input's div inside the label's div. Correct it to:

<div class="label">
 <label for="contact_email">Email address:</label>
</div>
<div>
 <input type="email" id="contact_email" name="contact_email" placeholder="E-mail address">
</div>

Second: Adjust Flexbox CSS for Consistent Alignment #

Your current Flexbox setup treats every label and input as separate flex items, which causes wrapping and misalignment. Instead, we'll group each label with its corresponding input to keep them paired, and tweak the flex properties for clean alignment.

Here's the revised CSS:

/* Article Styling Definitions */
article {
 display: flex;
 flex: 4;
 background-color: chartreuse;
}
#article_left {
 flex: 1;
 display: flex; /* Add this to center the "Call Us" text vertically */
 align-items: center;
 justify-content: center;
}
#article_right {
 flex: 1;
 padding: 0 20px; /* Add padding to prevent content touching edges */
}
.cta {
 flex: 30;
 border: 1px solid black;
 border-radius: 5px;
 margin: 25px;
 padding-left: 5px;
}
form {
 display: flex;
 flex-direction: column; /* Stack form groups vertically */
 gap: 12px; /* Add space between form fields */
}
/* Create a group for each label + input pair */
.form-group {
 display: flex;
 align-items: center; /* Vertically center label and input */
 justify-content: flex-start;
}
.label {
 flex: 0 0 160px; /* Fixed width for all labels to align perfectly */
 text-align: right;
 padding-right: 10px;
}
.form-group input,
.form-group textarea {
 flex: 1; /* Let inputs grow to fill available space */
 padding: 6px;
 border: 1px solid #ccc;
 border-radius: 4px;
 max-width: 350px; /* Prevent inputs from getting too wide */
}
.button {
 display: flex;
 justify-content: flex-end; /* Align submit button with inputs */
 margin-right: calc(160px + 10px); /* Match label width + padding */
 margin-top: 8px;
}
button {
 padding: 8px 16px;
 cursor: pointer;
}

Third: Update the HTML to Use Form Groups #

Wrap each label-input pair in a .form-group div to keep them linked in the Flexbox layout:

<section>
 <article>
 <div id="article_left">
 <p>Call Us</p>
 </div>
 <div id="article_right">
 <h2>Contact Us!</h2>
 <form id="contact_form">
 <!-- Name field group -->
 <div class="form-group">
 <div class="label">
 <label for="contact_name">Full name:</label>
 </div>
 <div>
 <input type="text" id="contact_name" name="contact_name" placeholder="Name">
 </div>
 </div>
 <!-- Phone field group -->
 <div class="form-group">
 <div class="label">
 <label for="contact_phone">Mobile number:</label>
 </div>
 <div>
 <input type="tel" id="contact_phone" name="contact_phone" placeholder="Mobile number">
 </div>
 </div>
 <!-- Email field group -->
 <div class="form-group">
 <div class="label">
 <label for="contact_email">Email address:</label>
 </div>
 <div>
 <input type="email" id="contact_email" name="contact_email" placeholder="E-mail address">
 </div>
 </div>
 <!-- Message field group -->
 <div class="form-group">
 <div class="label">
 <label for="contact_message">Message:</label>
 </div>
 <div>
 <textarea rows="4" cols="40" id="contact_message" name="contact_message"></textarea>
 </div>
 </div>
 <div class="button">
 <button type="submit">Submit</button>
 </div>
 </form>
 </div>
 </article>
</section>

Key Changes Explained: #

• Form Groups: By wrapping each label-input pair, we ensure they stay together and align correctly.
• Fixed Label Width: All labels have the same fixed width, so they line up perfectly on the right.
• Vertical Alignment: align-items:center in .form-group keeps labels and inputs centered vertically.
• Gap Spacing: gap:12px in the form adds consistent space between fields without extra margins.
• Corrected DOM Structure: Fixing the nested div ensures the browser renders the form correctly.

Give this a try, and your form should be neatly aligned now!

内容的提问来源于stack exchange，提问作者Beau Barbera