Element UI表單標簽為何顯示在輸入框上方而非左側？

Element ui表單標簽為何顯示在輸入框上方？

在使用Element UI構建表單時，你可能會遇到表單標簽（label）顯示在輸入框上方而不是左側的情況。本文將分析此問題并提供解決方案。

問題根源在于Element UI的el-form組件的默認行為。如果沒有設置label-width屬性，標簽的寬度會自動調整，導致長標簽換行顯示在輸入框上方。

開發者通常使用el-form-item組件并設置label屬性，但忽略了父級el-form組件的label-width屬性設置。 label-width屬性決定了標簽的寬度，從而控制標簽的位置。

解決方案：設置label-width屬性

解決此問題的關鍵在于為el-form組件添加label-width屬性，并指定一個合適的寬度值。例如：label-width=”100px” 將標簽寬度設置為100像素。 這將強制標簽文本在輸入框左側顯示，并控制標簽寬度。

正確代碼示例：

<el-form label-width="100px">   <el-form-item label="用戶名">     <el-input v-model="username"></el-input>   </el-form-item>   <el-form-item label="密碼">     <el-input v-model="password" type="password"></el-input>   </el-form-item> </el-form>

通過在標簽中添加label-width=”100px”，標簽將與輸入框在同一行對齊顯示。你可以根據實際需求調整label-width的值，例如使用label-width=”80px”或label-width=”120px”等。 如果標簽文字過長，仍然可能換行，此時需要考慮縮短標簽文字或調整表單布局。