之前一直困擾自己的一個問題就是表單內(nèi)radio、select等的對齊問題，一直以來，都是給提示添加label，然后跟radio等一起浮動，然后再設(shè)置margin解決的，但是這樣又得另外解決IE6下的雙邊距問題，搞得自己相當惱。今天終于花了些時間找到了好的解決方法。在此羅列羅列，也希望能夠幫到跟我同樣聞form色變的人。

先上解決方法吧：
提示文字須添加label標簽，然后樣式表里定義input,select,label{vertical-align:middle;}
eg.<label for=”bike”>自行車：</label><input type=”checkbox” name=”Bike” id=”bike”> //label加for純屬個人習慣
其實這里，未必要用label標簽,只要是行內(nèi)元素都可以，不過想加上“for”的話，就非它不可了。
最終效果：

發(fā)現(xiàn)網(wǎng)上有很多人說，并且正在看的你也有可能會說：為什么我HTML里這樣寫<p>自行車：<input type=”checkbox” name=”Bike” id=”bike”></p>，并且給input添加了屬性vertical-align:middle;卻無效呢？我想告訴你，還是仔細看相關(guān)使用文檔的好。
vertical-align的定義是這樣的：該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊。
所以，只要你給“自行車”添加行內(nèi)標簽，就可以解決這個問題了。

轉(zhuǎn)載于:https://www.cnblogs.com/gumgum/archive/2012/12/06/2804515.html

總結(jié)

以上是生活随笔為你收集整理的表单元素对齐问题解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。