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

最新推荐文章于 2022-08-14 19:48:22 发布
最新推荐文章于 2022-08-14 19:48:22 发布
阅读量1.9k 收藏 1
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_38077266/article/details/76165770
版权

今天在做一个检索的功能时,做一个搜索框
都知道这个功能一个input一个button搞定
但是在设置样式的时候发现
这里写图片描述
哎，我明明设置了同样的高啊，为什么会不同高呢?
于是开始怀疑人生
陷入了漫长的回忆……..
然后在记忆中，仿佛记得我在初学HTML和CSS的时候写淘宝静态页也遇到这个问题
居然这么久过去了，还是不会解决
发现这个还是一个比较重要的知识点，有必要给大家普及一下

所以，为什么呢？

原来，我们在使用这两个标签的时候，这两个标签有许多默认的属性
其中border都是他们默认设置了的属性
而且他们的border值还不一样，所以才导致它们的高度不一样
将border值都设置0后你就会看见奇迹
这里写图片描述
可把它厉害坏了

顺便再说点别的，这两个标签在触发的时候都会有蓝色焦点框，如果大家不需要
设置outline:none即可

3crazy
关注
input和button设置一样的高度，但是也页面中查看不一样高
Love_yl的专栏
07-17 682
input文本框和button按钮效果如下： 如果没有边框，不存在这个问题；设置边框后，就出现这个问题。 CSS代码如下： input[type="text"]{ border: 1px solid #ccc; padding: 0 14px; height: 32px; font-size: 14px; border-radius: 5px; color: #333; } button{ padding: 0 14px; height: 32px;
html基础
qq_50452445的博客
07-06 3238
HTML 的全称为超文本标记语言, 是一种标记语言。主要用来为文本添加语义。 注释 基本标签 h p img src: “图片的 URL”alt: “图像显示出错的替代文本”width: “图像宽度”height: “图像高度”注意点:​ 1.默认显示图像正常宽高​ 2.图像只设置宽度,高度自适应​ 3.图像只设置高度,宽度自适应​ 4.图像同时设置宽和高, 可能会导致图像变形 a href: “链接指向的页面 URL”target: “新页面打开方式” base target: “所有页面打开方
css中input与button高度不一致的原因及解决方法
alokka的博客
05-07 4689
首先说下input和button高度不一致的原因 之前在学习react项目，写todolist的时候遇到了这样的小问题，查阅了一些资料 发现网上说什么的都有，五花八门，经过我查阅资料，发现对不齐是因为行内元素的基线是不同的，所以会导致高低不同。解决办法也很简单给每个元素加上 ↓ 就可以了。 vertical-align:middle; .target { vertical-a...
HTML中input和button设置同样高度却不能等高的原因
ShiYadong的专栏
09-10 9855
.text{ height: 45px; width: 180px; background: yellow; } .button{ height: 45px; width: 90px; backgro
input和button 高度不一致问题
weixin_33694172的博客
09-06 605
原因是 input和button的高度计算不一样， input高度不包括border。 button高度包括border。 解决方法： 1、box-sizing：border-box； 2、border：0px；用box-shadow模拟border；box-shadow:0px 0px 1px black; 以上要ie8才支持。 如果要支持ie6、7、8就需要hack下，input...
input标签跟button 不在一个水平上的解决方法
lavoz的博客
02-22 1478
主要是记录一下遇到的问题 input 标签跟button 布局不在一个水平线上, 在标签样式中都加上 vertical-align: middle;
input & button对不齐、有间隙、高度不一致等问题解决方法
濮家大少
10-24 8910
1.input和button对不齐的原因 对不齐是因为行内元素的基线是不同的，所以会导致高低不同。 解决办法：每一个元素都加上下面即可； vertical-align:middle; 如下 .content{ width:200px; height:30px; vertical-align:middle; } .btn{ width:80px; heigh...
HTML基础
qq_27009517的博客
12-03 1492
HTML 标题标签 HTML 标题是通过<h1> - <h6>标签进行定义的，分别对应文档结构中的每一级标题。 下面的实例定义了所有标题。 <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6...
文本框和按钮不对齐现象(高度得设置一样)
weixin_60542090的博客
08-14 235
按钮​​按钮：按钮
Web前端学习笔记第一篇HTML5
babypiglolo的博客
10-06 562
Web前端学习笔记第一篇第一篇 HTML5第1章 HTML5学习概述1.1 认识HTML51.2 学习HTML5前的工作准备1. 头部内容2. 主体内容第二章 HTML5常见的块级标签和行级标签2.1 常见的块级标签2.2 常见的行级标签2.3 HTML5新增结构标签简介第三章 HTML5表格3.1 HTML5表格简介3.2 表格的基本属性3.3 行和列的属性3.4 表格的结构化与直列化3.4.1 表格的结构化3.4.2 表格的直列化3.5 章节案例：完成“特别休假申请单”第四章 HTML5表单4.1 表
同一行div或者其他行间块状标签，垂直高度不一解决办法
qq_43378240的博客
12-08 527
一个textarea和button都设置了display: inline-block;但是两个垂直高度不一致 解决办法 1.给高度不一的元素添加vertical-align: middle; 2.给父级添加display: flex; justify-content: center;
实现一个搜索框，按钮宽度固定，input的宽度自适应
Bliss_妍的博客
08-27 998
1. 利用flex-grow让input填充剩余空间 <div> <input> <button type="button">搜索</button> </div> div{ display: flex; } button{ width:100px; } input{ flex-grow: 1; } 2.同样使用flex布局，给input设置width:100%；给button设置固定宽度同样可以让Input填充剩余空...
<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
input type为text和button的不对齐问题 以及 之间的小空格
热门推荐
MrZZhou的博客
05-25 1万+
今天实验室学弟问我 “怎么这个输入、搜索按钮怎么都对不齐啊” 就像这样子： 咦 怎么会 我看看 代码没毛病啊 同样的height、同样的line-height，各有一个width（复习一下，input属于inline-block元素） 倒腾了好久 感觉甚是诡异 现在回想 怎么没有赶紧百度下 踩过这个坑的前辈们也是不少啊  首先要说明的是这个现象只会出现在Chrome中 没想到这次会是C
input和button的高度不一样
weixin_34248849的博客
11-05 336
2019独角兽企业重金招聘Python工程师标准>>> ...
<input>和<button>不同高的问题
weixin_34327223的博客
01-14 101
2019独角兽企业重金招聘Python工程师标准>>> ...
boostraptable 刷新按钮与搜索框高度不一致
wuguofei12345的博客
08-16 1237
boostrap table 显示刷新按钮时，刷新按钮的高度和搜索框的高度不一致，如下图： 解决办法是修改bootstrap-table.js的1158行加入： style="padding:9px 12px;"   以前是： if (this.options.showRefresh) { html.push(sprintf('&lt;button cl...
input总是和button不能对齐
xiaoxiede_wo的博客
06-08 2883
之前写搜索框时没注意这个问题，按正常而定写法input框和button边框总是不能对齐，可以在控制台通过实验button的marign-top来调节，但是还是不太好的 这里的总会出现错位； 解决1： 在input和button外层都加一层span，使两个span对齐，处理input边框就行了， 代码： html： <div class="search"> ...
v-model --双向数据绑定
qq_45802159的博客
01-03 3256
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
el-input和el-button怎样对齐，为什么我的高给的都是一样的，el-button总是差一像素
最新发布
09-14
在Element UI中，`el-input` 和 `el-button` 的默认样式可能会导致垂直对齐上的小差异。通常，为了在同一行对齐这两个组件，你可以考虑以下几个策略： 1. 使用CSS Flexbox布局：将它们放在一个共同的Flex容器里，并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值