讓輸入框文字始終保持底部對齊的技巧
在網頁開發中，動態調整輸入框高度并保持文本底部對齊是一個常見問題。單純使用padding雖然可以實現，但在高度變化時效果不佳。本文介紹一種更可靠的方法，利用容器和絕對定位來解決這個問題。
讓我們來看一個例子：
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input { height: 60px; /* 初始高度 */ border: none; /* 隱藏默認邊框 */ } .input-container { border: 1px solid #ccc; /* 為容器添加邊框 */ position: relative; /* 啟用相對定位 */ } .input-container input { position: absolute; /* 將輸入框設置為絕對定位 */ bottom: 0; /* 將輸入框底部固定在容器底部 */ left: 0; /* 將輸入框左端固定在容器左端 */ width: 100%; /* 確保輸入框占據容器的全部寬度 */ } </style> <div class="input-container"> <input type="text" placeholder="在此輸入文本"> </div>
在這個例子中，我們創建了一個名為input-container的div容器，并設置其相對定位。然后，將輸入框的默認邊框隱藏，并將其設置為絕對定位，并通過bottom: 0;屬性將其固定在容器底部。這樣，無論輸入框的高度如何變化，文本內容都將始終保持在底部。容器的邊框則提供了視覺上的邊框效果。 這種方法比單純使用padding更靈活，也更易于維護。 希望這個方法能有效解決您的問題。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
