一個解決表單中的文字和文本區域(textarea)上對齊的方法


在進行表單布局的時候通常會遇到這樣的情況

文本和textarea標簽是底部對齊的

<p><em>郵箱</em><textarea style='height:150px;width:540px;'></textarea> </p>
#content .form p em{
    display: inline-block;
    width:70px;
    text-align: right;
    margin-right: 20px;
}

上面是html代碼 實現方式就是在再添加一個文字包裹一樣的的空標簽,然后然真正包裹文字的標簽絕對定位,父元素進行相對定位,這樣空標簽頂替了因絕對定位失去的文檔流,絕對定位默認父元素是左上角這樣就實現了頂部對齊了

實現代碼如下:

<p class='pr'><em class='pa'>郵箱</em><em></em><textarea style='height:150px;width:540px;'></textarea></p>

注:pr和pa兩個類分別表示相對定位和絕定位


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM