解决input框对不齐的问题

本文主要是介绍解决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>