本文主要是介绍解决input框对不齐的问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
要想解决这个问题，首先你得了解input框 了解它的默认样式
input框的默认样式有:
1：获取焦点时的轮廓 outline；
2：2px的border边框
3:1px的top和bottom的padding值
产生的问题如下：
问题：默认padding值和border值是导致它们水平对不齐的根本原因
解决办法：1:float:left;浮动(让它和需要对齐的元素都一起浮动，然后他们就会紧贴在一起)
2: padding:0;(清除默认内边距)
3:border:0;（清除默认边框）
处理后的效果图：
代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>解决input框对不齐的问题</title><style>.box{margin: 40px 0px 0px 40px;width:252px;overflow: hidden;border: 1px solid #cccccc;}.box:hover{border: 1px solid black;}span{float: left;display:inline-block;width: 80px;height: 30px;line-height: 30px;border-right: 1px solid #cccccc;text-align: right;}input{/*浮动*/float: left;height: 30px;/*消除默认样式*/outline: none;padding: 0px;border:0;}</style>
</head>
<body><div class="box"><span>手机号：</span><input type="text"></div>
</body>
</html>
这篇关于解决input框对不齐的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
