巧妙調整input高度，讓文字優雅地靠底部
網頁開發中，常常需要微調表單元素樣式，特別是調整input高度并使文本位于底部。本文將提供一種無需padding的靈活方案，實現這一效果。
需求說明
假設我們有一個input元素，需要設置較高的height值，但默認的垂直居中對齊方式并不符合需求，我們需要將文本放置在底部。
解決方案：巧用容器和絕對定位
為了避免使用padding帶來的局限性，我們可以創建一個容器來包裹input元素，并利用css定位技術實現文本底部對齊。具體步驟如下：
-
隱藏input默認樣式: 通過CSS將input的邊框(border)設置為none，并設置背景色(background-color)為透明，使其本身不可見。
-
創建自定義容器: 使用一個div元素作為容器，設置與input相同的高度，并添加邊框和背景色，模擬input的外觀。
以下為html和CSS代碼示例：
<!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 #ccc; position: relative; /* 關鍵：使子元素可以絕對定位 */ } .input-container input { height: 100%; width: 100%; border: none; background-color: transparent; position: absolute; bottom: 0; /* 關鍵：將input定位到底部 */ } </style> </head> <body> <div class="input-container"> <input type="text" placeholder="請輸入文字"> </div> </body> </html>
通過以上方法，我們成功地將input高度設置為60像素，并將文本優雅地放置在底部，同時保持了方案的靈活性和可擴展性。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
