在表單佈局中，`` 與 `
| 方案 | 核心 CSS | 優點 | 缺點 | 推薦指數 |
|---|---|---|---|---|
| Flexbox 佈局 (最推薦) | .container { display: flex; align-items: center; gap: 8px; } input, select { height: 32px; box-sizing: border-box; } | 現代標準、響應式、垂直居中自動處理、代碼簡潔 | IE10+ 部分屬性需前綴 | ⭐⭐⭐⭐⭐ |
| Grid 佈局 | .container { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; } | 二維佈局控制力強 | 過度設計簡單表單 | ⭐⭐⭐⭐ |
| 統一高度 + vertical-align | input, select { height: 32px; line-height: 32px; vertical-align: middle; box-sizing: border-box; } | 兼容性極好 (IE6+) | select 內部文本垂直居中在 Firefox/Chrome 表現不一 | ⭐⭐⭐ |
| 外層包裹 div + 絕對定位 | .wrapper { position: relative; height: 32px; } input, select { position: absolute; top: 0; height: 100%; } | 像素級控制 | 結構複雜、響應式差、維護困難 | ⭐⭐ |
| UI 框架統一樣式 | 引入 Bootstrap / Ant Design / Element UI 等 | 組件庫已處理所有兼容性、設計規範統一 | 引入體積大、定制成本高 | ⭐⭐⭐⭐ (項目級) |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.form-row {
display: flex;
align-items: center; /* 垂直居中關鍵 */
gap: 12px; /* 控件間距 */
margin-bottom: 16px;
flex-wrap: wrap; /* 小屏換行 */
}
.form-label {
width: 80px; /* 標簽固定寬度 */
text-align: right;
font-size: 14px;
color: #333;
flex-shrink: 0;
}
.form-control {
flex: 1; /* 自動填充剩餘空間 */
min-width: 120px;
height: 36px; /* 統一高度 */
padding: 0 12px;
border: 1px solid #d9d9d9;
border-radius: 4px;
font-size: 14px;
line-height: 34px; /* 文本垂直居中 */
box-sizing: border-box; /* 關鍵：含 padding 在高度內 */
transition: border-color 0.2s;
}
.form-control:focus {
outline: none;
border-color: #4096ff;
box-shadow: 0 0 0 2px rgba(64, 150, 255, 0.2);
}
/* select 特殊處理：移除默認箭頭，自定義箭頭圖標 */
select.form-control {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px; /* 為箭頭留空間 */
}
/* 禁用狀態 */
.form-control:disabled {
background-color: #f5f5f5;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="form-row">
<label class="form-label">地址：</label>
<select id="province" class="form-control" style="width: 130px;">
<option>省份</option>
<option>廣東省</option>
<option>北京市</option>
</select>
<select id="city" class="form-control" style="width: 150px;">
<option>地級市</option>
</select>
<select id="district" class="form-control" style="width: 130px;">
<option>縣/區</option>
</select>
<input type="text" id="other" class="form-control" placeholder="詳細地址" v-model="user_info.other">
</div>
</body>
</html>.form-control 通用類，統一表單控件基線樣式
