嵌入Google Map的网页需实现DIV内3个横向排列按钮的HTML&CSS代码

Hey Tracy, let's get those buttons lined up horizontally under your Google Map—no more vertical stacking headaches! Buttons are block-level elements by default, so they’ll stack on top of each other unless we override that behavior. Here are three solid methods that should work for you:

Method 1: Flexbox (Modern & Go-To Solution) #

Flexbox is the easiest and most reliable way to handle horizontal alignment these days. It’s supported by all modern browsers and gives you full control over spacing and alignment.

HTML Structure #

<div class="button-container">
  <button>BUTTON 1</button>
  <button>BUTTON 2</button>
  <button>BUTTON 3</button>
</div>

CSS #

.button-container {
  display: flex;
  gap: 10px; /* Adjust this to control space between buttons */
  align-items: center; /* Vertically centers buttons if they have different heights */
  /* Optional: Add justify-content to control overall alignment (left/center/right) */
  /* justify-content: center; */
}

/* Optional: Style your buttons to match your design */
.button-container button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

Method 2: Inline-Block (Backward Compatible) #

If you need to support older browsers (like IE11), inline-block is a tried-and-true approach. Just note that you might need to handle tiny spacing gaps between buttons caused by HTML whitespace.

CSS #

.button-container {
  /* Fixes whitespace gaps between inline-block elements */
  font-size: 0;
}

.button-container button {
  display: inline-block;
  font-size: 16px; /* Reset font-size back to normal */
  margin-right: 10px; /* Space between buttons */
}

/* Remove margin from the last button to avoid extra space on the right */
.button-container button:last-child {
  margin-right: 0;
}

Method 3: Float (Legacy Approach) #

Floats are an older method, but they still work if you’re working with a legacy codebase. Just remember to clear the float on the parent container to prevent layout issues.

CSS #

.button-container {
  overflow: auto; /* Clears the float so the parent container wraps the buttons */
}

.button-container button {
  float: left;
  margin-right: 10px; /* Space between buttons */
}

.button-container button:last-child {
  margin-right: 0;
}

Quick Debugging Tips #

If none of these work right away, check these common issues:

• Make sure no other CSS is overriding your styles (use your browser’s dev tools—F12—to inspect the buttons and see what styles are being applied).
• Check if the parent div has a fixed width that’s too small to fit all three buttons side-by-side.
• Ensure your buttons don’t have width: 100% set (that’ll force them to take the full width of the container).

Pick the method that fits your project’s browser support needs, and you’ll have those buttons looking like [BUTTON 1] [BUTTON 2] [BUTTON 3] in no time!

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