您的位置：首页 > Web前端 > HTML

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

2017-10-16 12:58 351 查看

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

效果图：

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航