复选框单选框与文字对齐问题的研究与解决

本文探讨了12像素大小的字体在Firefox及Chrome浏览器中与单(复)选框对齐的问题,并提供了多种CSS解决方案。

对于14像素大小的字体是没有本篇所要探讨的单(复)选框与文字对齐的问题的。

对于12像素大小的文字,则就存在对齐问题了,尤其在Firefox火狐浏览器以及chrome谷歌浏览器下。

HTML:

    <label style="font-size:12px;">
      <input type="checkbox"/> 文字文字
    </label>

解决方案:

      vertical-align为基础:

      给 input:     vertical-align:text-bottom; margin-bottom:2px; margin-bottom:-2px\9;

      给 input : height:13px; vertical-align:text-top; margin-top:0;

      给 input :height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;

      给 input :  height:14px; vertical-align:top;

      给 input: vertical-align:middle; margin-top:-2px; margin-bottom:1px;

 

 

      

 

转载于:https://www.cnblogs.com/yangqi1209-com/p/7976335.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值