解决input框对不齐的问题

要想解决这个问题,首先你得了解input框 了解它的默认样式

input框的默认样式有:

1:获取焦点时的轮廓 outline;

2:2px的border边框

3:1px的top和bottom的padding值

产生的问题如下:

在这里插入图片描述
解决input框对不齐的问题_第1张图片

问题:默认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框对不齐的问题)