巧妙調整input元素高度，讓文字優雅地停靠底部
網頁設計中，常常需要調整input元素的高度，并確保其中的文字位于底部。然而，input元素默認的文字垂直居中，這該如何解決呢？本文將提供一種不依賴padding的巧妙方法。
問題描述
假設我們有一個高度為60像素的input元素，文字默認居中顯示。我們需要將文字調整到底部，同時保持input元素的高度不變。
<!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的邊框設置為透明或無邊框。
- 創建自定義容器： 創建一個div容器，設置其高度和邊框樣式。
- 絕對定位input： 使用position: absolute;將input定位到容器底部。
修改后的代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .input-container { height: 60px; border: 1px solid #000; /* 可自定義邊框樣式 */ position: relative; } .input-container input { height: 100%; border: none; /* 隱藏input默認邊框 */ position: absolute; bottom: 0; width: 100%; } </style> </head> <body> <div class="input-container"> <input type="text"> </div> </body> </html>
這種方法有效地將input元素的文字定位到底部，同時保持了60像素的高度，并且避免了使用padding帶來的潛在布局問題，更靈活地控制樣式和位置。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
