无需Bootstrap实现textarea与按钮的行内显示

Hey there! I totally get the frustration when elements don’t line up like you want them to. Let’s get that textarea and button sitting neatly on the same line—here are a couple of solid solutions:

Solution 1: Use Flexbox (Recommended) #

Flexbox is the easiest and most reliable way to align elements in a row these days. Just wrap your textarea and button in a parent container, then apply flexbox styling to it:

HTML #

<div class="input-group">
  <textarea placeholder="Enter your text..."></textarea>
  <button type="submit">Submit</button>
</div>

CSS #

.input-group {
  display: flex;
  gap: 10px; /* Adds space between the elements */
  align-items: center; /* Vertically centers them */
}

.input-group textarea {
  flex: 1; /* Let the textarea take up remaining space */
  min-height: 40px; /* Adjust as needed */
}

.input-group button {
  padding: 8px 16px; /* Adjust button sizing */
}

Solution 2: Convert Textarea to Inline-Block #

By default, <textarea> is a block-level element, which means it takes up the full width of its container. Changing it to inline-block lets it sit next to the button:

CSS #

textarea {
  display: inline-block;
  vertical-align: middle; /* Prevents vertical misalignment */
  width: 380px; /* Set a fixed width, or use % */
  min-height: 40px;
}

button {
  vertical-align: middle;
}

Pro Tip #

Make sure neither element has a width that’s too large for their parent container—if their combined width exceeds the parent’s width, they’ll wrap to the next line. Double-check any margins or padding that might be adding extra space too!

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