博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
label和input对齐的方法(转)
阅读量:6977 次
发布时间:2019-06-27

本文共 853 字,大约阅读时间需要 2 分钟。

表单元素与提示文字无法对齐的问题(input,checkbox文字对齐)文章的最终方法是:
1. 将文字第一字体设置为Tahoma;
2. 为input元素设置vertical-align:middle;
3. 为label元素设置vertical-align:middle;
 
       这样表单元素和提示文字就达到完美的对齐了。但是等等这里说的对齐只是相对的对齐,原因是中文字体是方块字高度有可能是奇数或者偶数,input元素的高度是奇数当字体高度为偶数时,在网页中最小单位是1px,上下总是不能完美对齐的总有1px的差别。而这1px相对这里而言还是可以接受的。这样这篇文章对表单元素和提示文字的对齐问题探讨结束!
 
       但是给所有的input和label放到ul和li元素里并给li加上1px的实体border,再次在ie6和firefox中打开,结果使人大跌眼睛。IE6下input元素和label内的文字似乎对li上边框特别钟情,虽然对齐了文字却在li里向上飘移。即使我对input、label、 li都分别设置了line-height:;也无济于事。

怎么办?一位朋友的研究给了我启发,给label元素加上display:inline-block;这是奇迹出现了ie6和firefox表现一致;由此对关于input框对齐提示文字的探讨告一段落。总结最终的方法如下:
1. 将文字第一字体设置为Tahoma;
2. 为input元素设置vertical-align:middle;
3. 为label元素设置vertical-align:middle;display:inline-block;
虽然中间参考和借鉴的不少人的方法,但是总算对这一问题做了一个交代。

原文地址:http://blog.csdn.net/wangxiaohui6687/article/details/7875829

转载于:https://www.cnblogs.com/WebMobile/articles/3939781.html

你可能感兴趣的文章
SAP QM 'QM System' 有什么控制作用?
查看>>
Health Check in eShop -- 解析微软微服务架构Demo(五)
查看>>
项目沟通管理计划
查看>>
[20160608]自治事务引起死锁.txt
查看>>
AliGenie AR Fuels the Ali New Retail Strategy - Interactive Marketing Activities
查看>>
一个最简单的通过WireShark破解SSL加密网络数据包的方法
查看>>
教你用TensorFlow和自编码器模型生成手写数字(附代码)
查看>>
荣之联“云桥OneBridge”让IT运维事半功倍
查看>>
中国人工智能学会通讯——人工智能在各医学亚专科的发展现状及趋势 1.3 人工智能在各医学亚专科的发展态势...
查看>>
新技术、新思维开创公共安全管理新模式
查看>>
新产品发布与A轮2000万美元 双喜临门后GrowingIO还要做什么
查看>>
《大数据、小数据、无数据:网络世界的数据学术》一 导读
查看>>
玉山银行的一名新员工“玉山小i随身金融顾问”
查看>>
消除危害 让BYOD策略更安全的几个秘诀
查看>>
云端卫士架构师讲DDoS攻击的智能防御之道
查看>>
《算法技术手册》一2.4.6 二次方的算法性能
查看>>
物联网时代全面降临
查看>>
什么是新IP的四层网络技术
查看>>
大数据流通存隐忧 产业信任体系亟待建立
查看>>
WebGL初探
查看>>