HTML5 如何讓 input 與 button 同行顯示？CSS 佈局技巧完整解析

在開發 Web 表單時，常會遇到 <input> 輸入框與 <button> 按鈕無法自然並排的問題。預設情況下，瀏覽器會將它們視為區塊級或行內區塊元素，導致換行或對齊不佳。本文將透過實際代碼示範，教你如何用 CSS 輕鬆實現同行顯示，並解決常見的樣式衝突。

問題重現

原始碼如下，輸入框與按鈕各自佔據一行，視覺上不協調：

<input type="captcha" v-on="blur:captchaCheck" class="form-control flat" placeholder="手機驗證碼" style="width:160px;">
<button v-on="click:onSubmit" class="get-captcha_button">獲取手機驗證碼</button>

核心解決方案：設定 display: inline 或 inline-block

最直接的方法是將兩個元素的 display 屬性設為 inline 或 inline-block，使它們在同一行內流式排列。建議優先使用 inline-block，因為它允許設定寬高與內外邊距，控制更靈活。

修正後的代碼

<input type="captcha" v-on="blur:captchaCheck" class="form-control flat" placeholder="手機驗證碼" style="width:160px; display:inline-block;">
<button v-on="click:onSubmit" class="get-captcha_button" style="display:inline-block;">獲取手機驗證碼</button>

進階技巧：Flexbox 佈局（推薦現代專案使用）

若專案支援現代瀏覽器，使用 Flexbox 容器能更優雅地控制對齊、間距與響應式行為：

<div style="display: flex; align-items: center; gap: 8px;">
  <input type="captcha" v-on="blur:captchaCheck" class="form-control flat" placeholder="手機驗證碼" style="width:160px;">
  <button v-on="click:onSubmit" class="get-captcha_button">獲取手機驗證碼</button>
</div>

• align-items: center：垂直置中對齊，避免高度不一導致的基線偏移。
• gap: 8px：直接設定元素間距，無需額外 margin。

常見坑點排查

1. 樣式被覆蓋：檢查 .get-captcha_button 或 .form-control 是否在其他 CSS 中被設為 display: block 或 width: 100%。
2. 行內元素間隙：若用 inline-block，HTML 換行會產生微小空白，可透過容器 font-size: 0 再在子元素恢復字體大小來消除。
3. Vue 指令干擾：v-on 不影響佈局，但確保事件綁定正確，避免因報錯導致渲染異常。

總結

只需幾行 CSS 即可讓 input 與 button 完美同行。小型專案可用 inline-block 快速修復；大型或新專案建議採用 Flexbox，維護性與擴充性更佳。記得在開發者工具中檢查最終計算樣式，快速定位衝突來源。