讓input高度變高，文字底部對齊的技巧
網頁設計中，經常需要調整表單元素樣式，例如：設置較高的input框，同時讓文字位于底部而非居中。本文將介紹一種無需padding的巧妙方法。
假設現有html結構如下：
<!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" placeholder="請輸入文字"> </body> </html>
這段代碼中，input高度為60像素，但文字垂直居中。為了讓文字位于底部，我們可以采用以下方法：
- 隱藏默認邊框: 使用border: none;移除input的默認邊框。
- 創建自定義容器: 創建一個div容器，設置邊框模擬input框外觀。
- 底部對齊input: 使用flex布局將input定位到容器底部。
改進后的代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .custom-container { height: 60px; border: 1px solid #ccc; display: flex; align-items: flex-end; /* 關鍵：將項目垂直對齊到底部 */ } input { border: none; height: 20px; /* 調整高度以適應文字大小 */ width: 100%; margin-bottom: 5px; /* 微調底部間距 */ } </style> </head> <body> <div class="custom-container"> <input type="text" placeholder="請輸入文字"> </div> </body> </html>
通過此方法，我們成功地將input高度設置為60像素，同時文字精確地位于底部，并能靈活控制input的外觀。 這種方法比單純使用padding更具可控性和靈活性。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
