移动端适配问题：屏幕缩放时CSS百分比宽度失效致按钮换行

Hey Roger, let's dig into why your GO button is dropping below the search input at specific screen widths—this is a super common layout gotcha, so we'll fix it together!

First, let's break down why this is happening #

The most likely culprits are:

1. Box model bloat: If you're using percentage widths but haven't set box-sizing: border-box, any padding, border, or margin on your search input/button gets added on top of the percentage width. For example, a width: 80% input with 10px left/right padding actually takes up 80% + 20px of space—this can push the button over the container's width limit and trigger a line break.
2. Inline-block whitespace: If your input and button are using inline-block or inline display, the line breaks/spaces in your HTML get rendered as actual blank space. This tiny extra width can tip the total content width over 100% at certain screen sizes, forcing the button to wrap.

Here are two solid fixes to try #

Fix 1: Use Flexbox (the cleanest modern solution)

Flexbox handles adaptive spacing automatically, so you won't have to mess with manual percentage calculations. Update your CSS like this:

/* Wrap your input and button in a container div if you haven't already */
.search-wrapper {
  display: flex;
  gap: 8px; /* Controls the space between input and button */
  margin: 0 10px; /* Adds side padding for mobile */
}

.search-input {
  flex: 1; /* Makes the input take up all available space */
  padding: 8px 12px;
  border: 1px solid #ccc;
}

.search-button {
  padding: 8px 18px;
  white-space: nowrap; /* Prevents "GO" from wrapping if screen gets tiny */
  border: none;
  background: #007bff;
  color: white;
}

/* Optional: Stack vertically on extra-small screens */
@media (max-width: 320px) {
  .search-wrapper {
    flex-direction: column;
  }
}

With this setup, the button will always stay next to the input until the screen is too narrow to fit both side-by-side—then we stack them with the media query.

Fix 2: Adjust box model + use calc() (if you prefer non-flex layouts)

If you want to stick with percentage widths, fix the box model first and calculate the input width to leave space for the button:

/* Apply border-box globally to avoid this issue everywhere */
* {
  box-sizing: border-box;
}

.search-input {
  width: calc(100% - 85px); /* Subtract button width + gap */
  padding: 8px 12px;
  display: inline-block;
  vertical-align: middle; /* Aligns input and button vertically */
}

.search-button {
  width: 70px;
  padding: 8px 12px;
  display: inline-block;
  vertical-align: middle;
}

Also, remove any whitespace between the input and button in your HTML (or put them on the same line) to eliminate that extra blank space:

<div class="search-wrapper">
  <input type="text" class="search-input" placeholder="Search..."><button class="search-button">GO</button>
</div>

Quick check for your original code #

If your old CSS looked something like this:

.search-input {
  width: 80%;
  padding: 10px;
}
.search-button {
  width: 15%;
}

The total width would be 80% + 15% = 95%, but the input's padding adds extra width on top of that—pushing the total over 100% and causing the wrap. Adding box-sizing: border-box would fix that immediately.

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