解决input框对不齐的问题

布满荆棘的人生 2023-07-05 05:23 16阅读 0赞

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

## input框的默认样式有: ##

## 1：获取焦点时的轮廓 outline； ##

## 2：2px的border边框 ##

## 3:1px的top和bottom的padding值 ##

## 产生的问题如下： ##

![在这里插入图片描述][20200213120105409.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5yb25nbG9uZzIw_size_16_color_FFFFFF_t_70]

## 问题：默认padding值和border值是导致它们水平对不齐的根本原因 ##

## 解决办法：1:float:left;浮动(让它和需要对齐的元素都一起浮动，然后他们就会紧贴在一起) ##

## 2: padding:0;(清除默认内边距) ##

## 3:border:0;（清除默认边框） ##

## 处理后的效果图： ##

![在这里插入图片描述][2020021311542655.png]

## 代码示例如下： ##

<!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>

[20200213120105409.png]: https://img-blog.csdnimg.cn/20200213120105409.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5yb25nbG9uZzIw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200213113846619.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5yb25nbG9uZzIw,size_16,color_FFFFFF,t_70
[2020021311542655.png]: https://img-blog.csdnimg.cn/2020021311542655.png