input和button设置一样的高度，但是也页面中查看不一样高

最新推荐文章于 2022-07-29 23:41:30 发布

神经质女孩

最新推荐文章于 2022-07-29 23:41:30 发布

阅读量682

点赞数

分类专栏： HTML5/CSS3 前端坑文章标签： css

本文链接：https://blog.csdn.net/Love_yl/article/details/107405688

版权

当为input文本框和button按钮设置相同高度并加上边框时，发现button显示得比input矮。原因是button在高度计算上使用Quirks模式，边框计算在内部导致。解决方案是将button的高度设为input高度减去2px，以确保两者视觉上高度一致。

摘要由CSDN通过智能技术生成

input文本框和button按钮效果如下：
在这里插入图片描述
如果没有边框，不存在这个问题；设置边框后，就出现这个问题。

CSS代码如下：

input[type="text"]{
   
    border: 1px solid #ccc;
    padding: 0 14px;
    height: 32px;
    font-size: 14px;
    border-radius

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

神经质女孩

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

文本框和按钮不对齐现象(高度得设置一样)

weixin_60542090的博客

08-14

233

按钮按钮：按钮

input的text和button在height高度一样的情况下显示的效果在高度上有差距

qq_41932272的博客

06-14

620

input的text和button在height高度一样的情况下显示的效果在高度上有差距原CSS文件两个元素的height:52px;但显示的高度有差距 button在高度计算上始终使用了Quirks模式。在Quirks模式下，边框的计算是在元素的宽度内的，而不像标准模式一样计算在外部。button的高度包含边框的高度，而文本框text则不包含边框高度。这就导致input高度会比button高两像素。参考网址：https://blog.csdn.net/qq_42527726/article/det

参与评论您还未登录，请先登录后发表或查看评论

css中，input和button设置了同样的height，实际高度不一样

Cheryl的加工厂

08-11

871

给input和button设置了同样的height，实际高度却不一样此时需要给input设置box-sizing: border-box; <div class="search-container" > <input type="text"> <button>搜索</button> </div> input { position: absolute; top:0; left: 0; height: 32px; width

给input和button设置一样的宽度和高度，为何input会长点？

qinduan007的博客

03-22

862

给input和button设置一样的宽度和高度，为何input会长点？ input带有默认的padding； button的height默认是包含了padding和border 因此在输入框后面设置button时，当两个元素设置的高度一致时，会看到输入框会比按钮高，解决方案: 1 可以选择将浏览器自带的样式先去掉， 2 修改元素的box-size, border-box/content-box 3 选择修改其中一个元素的高度。 ul默认带有16px的margin和40px的padding。 ...

input type=button设置高度不管用

weixin_30399797的博客

05-06

294

1 <input type="button" name="calRate" id="calRate" value="查询" /> 1 #calRate{ 2 width: 100%; 3 height: 45px; 4 } 这样写了之后不起作用，，，无语。对比之后，突然发现设置个背景，或者写个border:none;甚至随便写个属性。。。 ...

boostraptable 刷新按钮与搜索框高度不一致

wuguofei12345的博客

08-16

1237

boostrap table 显示刷新按钮时，刷新按钮的高度和搜索框的高度不一致，如下图：解决办法是修改bootstrap-table.js的1158行加入： style="padding:9px 12px;" 以前是： if (this.options.showRefresh) { html.push(sprintf('<button cl...

一、文本框和按钮不对齐现象(高度得设置一样)

m0_72630538的博客

07-29

501

input设置左浮动(floatleft)。取消input默认的2px边框和上下1px内边距设置1px的边框设置高button设置高度比input的高度大2px

bootstrap的form-group高度不一致

florrie

12-05

2105

在嵌入的页面里面，这个form-group高度特别高，但是在其本身页面显示没有问题的，这是什么情况，求大神？？？ .navLeft{ float: left; } #rightContainer{ min-width: 85%; } /*这个rightContainer是放点击左侧功能之后显示的页面位置*/ #rightContainer:after{ content: ""...

html input button 大小,input和button的高度不一样

weixin_39818662的博客

06-07

545

button在高度计算上始终使用了Quirks模式。在Quirks模式下，边框的计算是在元素的宽度内的，而不像标准模式一样计算在外部(button的高度包含边框的高度，而文本框text则不包含边框高度。) quirks模式是什么？‍HTML姓名学号1.如果css是div,body,form,input,label{margin:0;padding:0;}body{font-family:"...

css中input与button高度不一致的原因及解决方法

alokka的博客

05-07

4683

首先说下input和button高度不一致的原因之前在学习react项目，写todolist的时候遇到了这样的小问题，查阅了一些资料发现网上说什么的都有，五花八门，经过我查阅资料，发现对不齐是因为行内元素的基线是不同的，所以会导致高低不同。解决办法也很简单给每个元素加上 ↓ 就可以了。 vertical-align:middle; .target { vertical-a...

input & button对不齐、有间隙、高度不一致等问题解决方法

濮家大少

10-24

8889

1.input和button对不齐的原因对不齐是因为行内元素的基线是不同的，所以会导致高低不同。解决办法：每一个元素都加上下面即可； vertical-align:middle; 如下 .content{ width:200px; height:30px; vertical-align:middle; } .btn{ width:80px; heigh...

<input>和<button>设置同样高度却不能等高

lb752791962的博客

09-10

4362

今天写了一个搜索框，就以简单的为例：<style> *{margin: 0;padding: 0;} div{background-color: #ccc;padding: 50px;} form{width: 200px;position: relative;margin: 0 auto;} input{width: 100px;height: 40

HTML中input和button设置同样高度却不能等高的原因

ShiYadong的专栏

09-10

9855

.text{ height: 45px; width: 180px; background: yellow; } .button{ height: 45px; width: 90px; backgro

input type为text和button的不对齐问题以及之间的小空格

MrZZhou的博客

05-25

1万+

今天实验室学弟问我 “怎么这个输入、搜索按钮怎么都对不齐啊” 就像这样子：咦怎么会我看看代码没毛病啊同样的height、同样的line-height，各有一个width（复习一下，input属于inline-block元素）倒腾了好久感觉甚是诡异现在回想怎么没有赶紧百度下踩过这个坑的前辈们也是不少啊首先要说明的是这个现象只会出现在Chrome中没想到这次会是C

解决设置相同高度情况下<input>和<button>不同高

张3疯one

07-26

1939

今天在做一个检索的功能时,做一个搜索框都知道这个功能一个input一个button搞定但是在设置样式的时候发现

解决两个input设置了一样的高度，实际高度却不一样问题

NINE-NINE的博客

05-19

7679

解决两个input设置了一样的高度，实际高度却不一样

HTML中文本框和按钮如何设置大小