单选框和字对齐

邹强发布于2019-08-29 15:26 / 2468人阅读

摘要：因为大部分浏览器字体大小都是文字的底线和单选框是不对齐的最简单的方法就把单选框和字都加上就好了如果还有有点不完美就用这样微调一下单选框如果上面的万能方法不行就试试下面的以单选框加以单选框加以单选框加

因为大部分浏览器字体大小都是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 单选框取值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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