如何让两个input标签并排各占50%宽度？表单布局问题求助

Hey there! Let’s break down your input layout questions with practical, easy-to-implement fixes:

1. General Approach: Make Two Inputs Side-by-Side with 50% Width Each #

Here are three reliable methods to achieve this, depending on your browser support needs and layout goals:

Method 1: Flexbox (Modern & Low-Fuss) #

Wrap your inputs in a container and use flexbox—it handles spacing and alignment automatically:

<div class="input-pair">
  <input type="text" placeholder="First Input">
  <input type="text" placeholder="Second Input">
</div>

.input-pair {
  display: flex;
  gap: 0; /* Remove this if you want no gap between inputs */
}
.input-pair input {
  flex: 1; /* Forces each input to take equal space */
  box-sizing: border-box; /* Ensures padding/border don’t expand the width */
  /* Add your custom styles (border, padding, etc.) here */
}

Method 2: Inline-Block (Legacy Browser Friendly) #

If you need to support older browsers, inline-block works—but you have to account for two gotchas:

<div class="input-pair">
  <input type="text" placeholder="First Input" class="half-width">
  <input type="text" placeholder="Second Input" class="half-width">
</div>

.input-pair {
  font-size: 0; /* Eliminates whitespace between inline-block elements */
}
.half-width {
  display: inline-block;
  width: 50%;
  box-sizing: border-box; /* Critical! Includes padding/border in the 50% width */
  font-size: 1rem; /* Reset font size since parent was set to 0 */
  /* Your custom styles here */
}

Method 3: CSS Grid (Great for Scalable Layouts) #

Grid is perfect if you plan to expand your form later—its syntax is intuitive for column-based layouts:

<div class="input-pair">
  <input type="text" placeholder="First Input">
  <input type="text" placeholder="Second Input">
</div>

.input-pair {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Creates two equal-width columns */
  gap: 0; /* Adjust gap size as needed */
}
.input-pair input {
  box-sizing: border-box;
  /* Your custom styles here */
}

2. Fixing Your Specific Form Issue #

Looking at your code, two issues are causing your inputs to wrap to new lines:

1. Box Model Mismatch: By default, box-sizing: content-box means your width: 50% only applies to the input’s content area. The padding: 10px and border: 1px add extra width, making each input wider than 50%.
2. Inline Whitespace: Inline-block elements respect the whitespace between your <input> tags in the HTML—this extra space pushes the second input to the next line.

Here’s your fixed code:

Option 1: Remove HTML Whitespace (Cleanest HTML) #

<!-- No space between input tags -->
<input type="text" name="firstname" placeholder="First Name" class="first"><input type="text" name="lastname" placeholder="Last Name" class="first">

.first{
  border:1px solid #E5E5E4;
  margin-top: 10px;
  height: 30px;
  text-align: left;
  display: inline-block;
  width: 50%;
  padding: 10px;
  font-size: 1em;
  box-sizing: border-box; /* Fixes width calculation */
}

Option 2: Keep HTML Whitespace (More Readable) #

Wrap inputs in a container to hide whitespace without messy HTML:

<div class="name-group">
  <input type="text" name="firstname" placeholder="First Name" class="first">
  <input type="text" name="lastname" placeholder="Last Name" class="first">
</div>

.name-group {
  font-size: 0; /* Removes whitespace between inputs */
}
.first{
  border:1px solid #E5E5E4;
  margin-top: 10px;
  height: 30px;
  text-align: left;
  display: inline-block;
  width: 50%;
  padding: 10px;
  font-size: 1em; /* Reset font size */
  box-sizing: border-box; /* Fixes width calculation */
}

Either fix will make your firstname and lastname inputs sit side-by-side perfectly in your 800px form!

内容的提问来源于stack exchange，提问作者Hemant Arora