HTML Input 框不獨佔一行 CSS 解決方案

問題現象

在文章段落中插入 `` 輸入框，預設會**獨佔一行**，破壞排版流暢度。

根本原因

`` 預設 `display: inline-block`，但瀏覽器預設樣式常包含 `width: 100%` 或 `box-sizing` 導致撐滿容器，或被外層 `block` 元素影響。

核心解決方案

方案一：強制 inline-block（最快）

input { 
    display: inline-block !important; 
    width: auto !important; 
}

方案二：CSS 類別控制（推薦，可維護）

.inline-input {
    display: inline-block;
    width: auto;
    vertical-align: middle;   /* 與文字垂直置中 */
    margin: 0 4px;            /* 與前後文字間距 */
    padding: 2px 6px;         /* 內部間距 */
    box-sizing: border-box;   /* 含邊框寬度 */
}

<p>姓名：<input type="text" class="inline-input" placeholder="請輸入">，年齡：<input type="number" class="inline-input" style="width:60px;"></p>

方案三：Flexbox 容器精準控制

.form-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.form-inline label { white-space: nowrap; }
.form-inline input { flex: 0 0 auto; width: 120px; }

<div class="form-inline">
    <label>姓名：<input type="text" placeholder="請輸入"></label>
    <label>年齡：<input type="number" style="width:60px;"></label>
</div>

進階樣式微調

/* 去除預設外框，自訂底線風格 */
.underline-input {
    display: inline-block;
    border: none;
    border-bottom: 1px solid #333;
    background: transparent;
    padding: 2px 0;
    width: 150px;
    outline: none;
}
.underline-input:focus { border-bottom-color: #3498db; }

常見坑點對照表

語意化無障礙建議

<label>姓名：<input type="text" class="inline-input" aria-label="姓名"></label>

• 用 `` 包裹或 `for`/`id` 關聯，提升可及性
• 隱藏標籤文字時用 `aria-label` 或 `title`
• 必要欄位加 `required`、`aria-required="true"`

完整範例：填空題風格

<style>
.fill-blank {
    border: none; border-bottom: 2px solid #2c3e50;
    background: transparent; padding: 0 4px;
    font: inherit; color: inherit;
    min-width: 80px; width: auto;
    outline: none;
}
.fill-blank:focus { border-bottom-color: #e74c3c; }
</style>

<p>
    今天是 <input class="fill-blank" value="2024"> 年 
    <input class="fill-blank" value="01"> 月 
    <input class="fill-blank" value="15"> 日，天氣<input class="fill-blank" placeholder="晴/雨">。
</p>

靈活運用 `display: inline-block`、`width: auto`、`vertical-align: middle` 三大核心屬性，配合語意化 ``，即可在文章流中自然嵌入輸入框，兼顧美觀與無障礙。