單選框和字對齊

鄒強發布于2019-08-29 15:26 / 2481人閱讀

摘要：因為大部分瀏覽器字體大小都是文字的底線和單選框是不對齊的最簡單的方法就把單選框和字都加上就好了如果還有有點不完美就用這樣微調一下單選框如果上面的萬能方法不行就試試下面的以單選框加以單選框加以單選框加

因為大部分瀏覽器字體大小都是12px,12px文字的底線和單選框是不對齊的,
最簡單的方法就把單選框和字都加上vertical-align: middle;就好了,
如果還有有點不完美,就用margin-top:-1px; margin-bottom:1px;,這樣微調一下單選框

如果上面的"萬能方法"不行就試試下面的:

以vertical-align:text-bottom

單選框加vertical-align:text-bottom; margin-bottom:2px; margin-bottom:-2px9;

以vertical-align:text-top

單選框加height:13px; vertical-align:text-top; margin-top:0;

以vertical-align:bottom

單選框加height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;

以vertical-align:top

單選框加height:14px; vertical-align:top;

或者用vertialc-align:-3px可以緩解問題

以上的px值不一定是最完美的,根據不同環境自己找一個完美的值

云服務器 GPU云服務器單選框 html打勾單選框 js單選框只讀 php 單選框取值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113320.html

單選框和字對齊

都加上 vertical-align: middle; ?

LdhAndroid 2019-04-23 13:43 評論0 收藏0
單選框和復選框與文本的垂直居中顯示問題

摘要：故嘗試揣摩業界大牛的一些歷程，希望能得到不一樣的收獲。張鑫旭前輩的博客是很不錯的選擇之一，對這些基本技能闡述得十分透徹。本文是對其很早一篇文章復選框或單選框與文字對齊的問題的深入研究的再次實驗，畢竟瀏覽器對的支持多年來變化很大。前言工作三年，寫了不少代碼，也確實接觸不少技術。但是仔細回顧，卻又感一片空白，一臉茫然。故嘗試揣摩業界大牛的一些歷程，希望能得到不一樣的收獲。張鑫旭前輩的...

WrBug 2019-08-01 17:54 評論0 收藏0
單選框和復選框與文本的垂直居中顯示問題

摘要：故嘗試揣摩業界大牛的一些歷程，希望能得到不一樣的收獲。張鑫旭前輩的博客是很不錯的選擇之一，對這些基本技能闡述得十分透徹。本文是對其很早一篇文章復選框或單選框與文字對齊的問題的深入研究的再次實驗，畢竟瀏覽器對的支持多年來變化很大。前言工作三年，寫了不少代碼，也確實接觸不少技術。但是仔細回顧，卻又感一片空白，一臉茫然。故嘗試揣摩業界大牛的一些歷程，希望能得到不一樣的收獲。張鑫旭前輩的...

yck 2019-08-29 13:44 評論0 收藏0
純css寫單選框和復選框的樣式和功能

摘要：只用純寫的單選框和復選框的樣式和功能該怎么寫看這里，復制下面的代碼運行一遍就知道了，快試試吧效果截圖移動單選按鈕純寫法圓點使用背景圖片寫法只用純css寫的單選框和復選框的樣式和功能該怎么寫？看這里，復制下面的代碼運行一遍就知道了，快試試吧！效果截圖：showImg(https://segmentfault.com/img/bVIQNR?w=719&h=1280); ...

sanyang 2019-08-30 15:52 評論0 收藏0