HTML中input和button解决等高不对齐的原因

最新推荐文章于 2024-01-18 11:14:33 发布

LDH-

最新推荐文章于 2024-01-18 11:14:33 发布

阅读量1w

点赞数 3

分类专栏： HTML5 文章标签： input和button设置等高却不对齐 input和button区别 input和button解决不对齐

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在HTML中input和button有不能一样高的原因吗怎么去解决他，下面给你一个解决方法

<style>  
        .text{  
            height: 45px;  
            width: 180px;  
            background: yellow;  
             
        }  
        .button{  
            height: 45px;  
            width: 90px;  
            background: red;  
             
        }  
    </style>  
</head>  
<body>  
<input class="text" type="text"/><input type="button" class="button" value="搜索" />  
</body>

设置了同样高度，都为45px，高度却不一致，明显的看出input要高出一点

原因：

1、button在高度计算上始终使用了Quirks模式。

2、在Quirks模式下，边框的计算是在元素的宽度内的，而不像标准模式一样计算在外部，所以在text和button上同时设置边框就会得到button的高度比text小的现象。

3、button的高度包含边框的高度，而文本框text则不包含边框高度。

将边框都设置为none

dth: 180px;  
           background: yellow;  
           border: none;  
       }  
       .button{  
           height: 45px;  
           width: 90px;  
           background: red;  
           border: none;  
       }  
   </style>

效果图：

LDH-

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
HTML中input和button解决等高不对齐的原因

在HTML中input和button有不能一样高的原因吗怎么去解决他，下面给你一个解决方法 .text{ height: 45px; width: 180px; background: yellow; } .button{
复制链接

扫一扫