巧妙調整input框高度，讓文字底部對齊
前端開發中，常常需要微調表單元素以符合設計要求。一個常見問題是：如何增加input框高度，同時確保文字顯示在底部，而非默認的垂直居中？本文將探討幾種方法，超越簡單的padding填充。
先來看一個基礎的html代碼片段，input框高度已設為60像素，但文字居中：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input { height: 60px; } </style> </head> <body> <input type="text"> </body> </html>
為了將文字置于底部，一種有效方法是：隱藏input框的默認邊框，創建一個包含input框的容器，并使用絕對定位將input框放置在容器底部。這不僅解決了文字對齊問題，也提供了更靈活的樣式控制。
具體步驟如下：
- 隱藏input默認邊框: 使用css border: none; 去除input框的默認邊框。
- 創建容器: 使用
作為容器，設置其高度和邊框樣式。
- 底部定位input: 使用position: absolute; 和 bottom: 0; 將input框絕對定位到容器底部。
以下是改進后的代碼示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { height: 60px; border: 1px solid #000; position: relative; /* 關鍵：使子元素可以絕對定位 */ } input { border: none; position: absolute; bottom: 0; width: 100%; box-sizing: border-box; /* 確保內邊距不影響元素總寬度 */ } </style> </head> <body> <div class="container"> <input type="text"> </div> </body> </html>
通過以上方法，我們成功地增加了input框高度，并使文字顯示在底部。這種技術在前端開發中非常實用，能有效控制表單元素的樣式。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
