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

最新推荐文章于 2021-08-11 16:28:29 发布
最新推荐文章于 2021-08-11 16:28:29 发布
阅读量679 收藏
点赞数
分类专栏： HTML5/CSS3 前端坑 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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元/天 解锁文章
神经质女孩
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网络营销大一样卷笔试+机试.doc
10-03
题目中的语句表示在网页上添加了一个名为 `firework.avi` 的视频文件，并设置了宽度和高度，且会自动播放。可以通过添加 `LOOP` 属性来指定播放次数，但题目中的 `AUTOSTART` 写法有误，应为 `autostart`。 10. `...
input的text和button在height高度一样的情况下显示的效果在高度上有差距
qq_41932272的博客
06-14 613
input的text和button在height高度一样的情况下显示的效果在高度上有差距 原CSS文件 两个元素的height:52px;但显示的高度有差距 button在高度计算上始终使用了Quirks模式。在Quirks模式下，边框的计算是在元素的宽度内的，而不像标准模式一样计算在外部。button的高度包含边框的高度，而文本框text则不包含边框高度。这就导致input高度会比button高两像素。 参考网址：https://blog.csdn.net/qq_42527726/article/det
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;甚至随便写个属性。。。 ...
给input和button设置一样的宽度和高度，为何input会长点？
qinduan007的博客
03-22 856
给input和button设置一样的宽度和高度，为何input会长点？ input带有默认的padding； button的height默认是包含了padding和border 因此在输入框后面设置button时，当两个元素设置的高度一致时，会看到输入框会比按钮高， 解决方案: 1 可以选择将浏览器自带的样式先去掉， 2 修改元素的box-size, border-box/content-box 3 选择修改其中一个元素的高度。 ul默认带有16px的margin和40px的padding。 ...
css中input与button高度不一致的原因及解决方法
alokka的博客
05-07 4681
首先说下input和button高度不一致的原因 之前在学习react项目，写todolist的时候遇到了这样的小问题，查阅了一些资料 发现网上说什么的都有，五花八门，经过我查阅资料，发现对不齐是因为行内元素的基线是不同的，所以会导致高低不同。解决办法也很简单给每个元素加上 ↓ 就可以了。 vertical-align:middle; .target { vertical-a...
boostraptable 刷新按钮与搜索框高度不一致
wuguofei12345的博客
08-16 1236
boostrap table 显示刷新按钮时，刷新按钮的高度和搜索框的高度不一致，如下图： 解决办法是修改bootstrap-table.js的1158行加入： style="padding:9px 12px;"   以前是： if (this.options.showRefresh) { html.push(sprintf('&lt;button cl...
C# for CSDN 乱七八糟的看不懂
06-03
这时，array1 就变成和 array2 一样的数组了。 集合 集合的使用 集合可以看成是可以随意添加的数组，因此凡是在使用数组的场合，都可以 使用集合。而且集合的元素可以是任意对象，操作也比数组灵活的多。 使用集合...
HTML与CSS面试题.docx
01-14
也可以使用visibility:hidden将元素隐藏，但是元素不放弃自己的位置。 7. 清除浮动的方式： 可以使用四种方法来清除浮动：① 让父盒子形成BFC，设置overflow:hidden属性；② 给后面的父盒子上设置clear:both属性，...
uniapp入门教程.pdf
最新发布
04-19
- 在uniapp中，你可以像在普通的Vue项目中一样编写代码。通过在`pages/`目录下创建新的页面文件夹，并在其中编写Vue组件。 - 例如，创建一个名为“HelloWorld”的页面，并编写简单的Vue组件代码。这个示例中包含了一...
饿了么(25问).pdf
04-12
上述数组随机取数，每次返回的值都不一样 使用 `Math.random()` 结合数组长度来实现数组的随机取数，每次需要不重复时可以使用洗牌算法。 #### 19. 如何找 0-5 的随机数，95-99 呢 对于 0-5 的随机数，可以直接...
css中，input和button设置了同样的height，实际高度不一样
Cheryl的加工厂
08-11 864
给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对不齐、有间隙、高度不一致等问题解决方法
濮家大少
10-24 8844
1.input和button对不齐的原因 对不齐是因为行内元素的基线是不同的，所以会导致高低不同。 解决办法：每一个元素都加上下面即可； vertical-align:middle; 如下 .content{ width:200px; height:30px; vertical-align:middle; } .btn{ width:80px; heigh...
<input>和<button>设置同样高度却不能等高
lb752791962的博客
09-10 4358
今天写了一个搜索框，就以简单的为例：<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 9849
.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
html input button 大小,input和button的高度不一样
weixin_39818662的博客
06-07 542
button在高度计算上始终使用了Quirks模式。在Quirks模式下，边框的计算是在元素的宽度内的，而不像标准模式一样计算在外部(button的高度包含边框的高度，而文本框text则不包含边框高度。) quirks模式是什么？‍HTML姓名学号1.如果css是div,body,form,input,label{margin:0;padding:0;}body{font-family:"...
解决设置相同高度情况下<input>和<button>不同高
张3疯one
07-26 1935
今天在做一个检索的功能时,做一个搜索框 都知道这个功能一个input一个button搞定 但是在设置样式的时候发现
解决两个input设置了一样的高度，实际高度却不一样问题
NINE-NINE的博客
05-19 7676
解决两个input设置了一样的高度，实际高度却不一样
css中input和button对不齐的问题
06-06
该问题可能是由于 input 和 button 的默认样式不一致导致的。你可以尝试使用 CSS 调整它们的样式，使它们对齐。 下面是一些可能有用的 CSS 代码示例： ```css /* 使 input 和 button 的高度相同 */ input, button { height: 30px; } /* 使 input 和 button 的边框和内边距相同 */ input, button { box-sizing: border-box; border: 1px solid #ccc; padding: 5px; } /* 使 input 和 button 在同一行内对齐 */ form { display: flex; align-items: center; } /* 调整 input 和 button 的位置 */ input { margin-right: 10px; } ``` 你可以根据具体情况选择适合你的 CSS 代码。希望能帮到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值