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

最新推荐文章于 2022-08-15 13:56:35 发布
最新推荐文章于 2022-08-15 13:56:35 发布
阅读量905 收藏
点赞数 2
文章标签： html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qinduan007/article/details/115100539
版权

input样式 button高度 padding box-sizing 解决方案
关键词由CSDN通过智能技术生成

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

input带有默认的padding；

button的height默认是包含了padding和border

因此在输入框后面设置button时，当两个元素设置的高度一致时，会看到输入框会比按钮高，

解决方案:

1 可以选择将浏览器自带的样式先去掉，

2 修改元素的box-size, border-box/content-box

3 选择修改其中一个元素的高度。

ul默认带有16px的margin和40px的padding。

qinduan007
关注
input和button设置一样的高度，但是也页面中查看不一样高
Love_yl的专栏
07-17 700
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;
设置输入框和按钮对齐
polary_的博客
05-21 3938
写一个简单的搜索页面，想达到如下图的结果 <div class="search"> <input type="text" placeholder="请输入查询的天气" autocomplete="off" autofocus="off"> <button>搜索</button> </div> 1.首先input和button是行内块元素，两者之间会有缝隙，给两者设置float就可以贴合在一起 input,button {
关于html的input按钮与input文本框的高度问题解析
qq_41823528的博客
10-16 1141
问：为什么input按钮的高度与input文本框的高度不一致？ 答：因为input按钮在高度与宽度计算上采用的是Quirks模式进行计算，也就是说input按钮的高度与宽度分别是包含了padding、border，而对于input文本框则采用的标准模式进行计算宽度与高度，也就是在css样式中设置width：50px,它的内容盒子宽度就是50px，同样对于高度也是如此. 但是对于input按钮的...
html中加长提交按钮,HTML input submit提交按钮简介说明
weixin_34619335的博客
06-03 2444
摘要:下文讲述html代码中input type=’submit’时的相关属性简介说明,如下所示:input type=’submit’ 简介当input标签中 type=’submit’时,代表此标签是一个提交按钮,当点击按钮时可实现当前标签所处的from提交,input type=’submit’还具有以下属性:1.value:设置value属性值,可作为按钮的显示的文本信息2.form(HT...
HTML选择输入方法,在HTML中选择输入和文本输入-使宽度相等的最佳方法？
weixin_32001191的博客
06-03 237
我有一个像这样的简单表格(仅用于说明目的)…NameCountryAustraliaUSA我使用CSS的布局方法如下…form {width: 500px;}form .input-row {display: block;width: 100%;height: auto;clear: both;overflow: hidden; /* stretch to contain floated chi...
element ui 结合 vue 和 php的分页讲解
weixin_42371812的博客
08-15 545
那么，在开发中，分页是一个家常便饭，每一个开发人员都会遇上。从古以来，处理分页都有两种方案，一种是前端处理，另一种就是后端处理。（主要看下面红框的三个部份）现如今是前后端分离的天下。后端管后端的工作，大家彼此不相干。如果开发文档写得很详细，可以说两组人“老死不相往来”都可以。前端处理，其实就是后端只需要返回一个所有的数组集合给前端。而前端只需要拿到这个集合做分页处理就行。.........
composables封装一个表单验证组合式函数，可以帮助管理表单的验证状态，包括验证规则、错误消息等，有.ts和.vue文件
最新发布
10-11
`formValidation.ts`（通常是`.ts`因为TS支持静态类型检查）可能会长这样： ```typescript import { defineRuntimeComponent } from 'vue'; export default defineRuntimeComponent({ setup() { // 定义验证规则...
前端面试题(跟谁学)
香葱芝士面包
03-11 1224
标题web前端开发：可用性，可访问性，和可维护性 可用性指的是：产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观感受可好，是从用户的角度来看产品的质量。可用性好意味着产品质量高，是企业的核心竞争力。 可维护性一般包含两个层次，一是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好。二是代码是否容易被人理解，是否容易修改和增强功能。可维护性和可复用性、可扩展性等有交叉的地方。构建可维护性好的代码，对企业的长期发展非常重要。 可访问性是：Web内容对于残障用户的可阅读和可理解性。
python例题（字典练习）
热门推荐
wc19862274581的博客
04-20 2万+
1、【问题描述】 输入字符串，输出字符串中出现次数最多的字母及其出现次数。如果有多个字母出现次数一样，则按字符从小到大顺序输出字母及其出现次数。 【输入形式】 一个字符串。 【输出形式】 出现次数最多的字母及其出现次数 【样例输入】 abcccd 【样例输出】 c 3 代码实现： str=input('请输入字符串：') a=set(str) #set() 函数创建一个无序不重复元素集，可进行关系测试，删除重复数据，还可以计算交集、
前端 基础面试问题汇总
技术改变世界
04-24 1211
1&gt;、html5有哪些新标签？ &lt;article&gt; 标签定义外部的内容（外部内容如blog,news）。 &lt;aside&gt; 标签定义article以外的内容（可用做文章的侧栏）。 &lt;canvas&gt;使用JavaScript在网页上绘制图形图像。 &lt;details&gt; 用于描述某个文档部分的内容。 &lt;sum...
安卓Button按钮强制拉伸解决方式
alov0616的博客
09-22 420
由于实现按钮的是Button，因此查询了网上 button背景高度拉伸问题的帖子。有几种解决方案。 1、设置MinHeight 和 MinWidth 为0dp。问题解决。 2、将Button用ImageView和ImageButton替代。经过测试，按钮上的text文字被覆盖，不显示 转载于:https://www.cnblogs.com/shanshuijian/p/482883...
怎么把文本框弄一样大小_HTML中如何设置文本框的大小
weixin_35057850的博客
01-14 4501
展开全部步骤如下62616964757a686964616fe58685e5aeb9313333656661651、首先用sublime text2新建一个测试用的html页面。我这里就叫test.html2、这个时候在网页中添加以个label标签和一个input框。3、预览一下效果，我们可以知道默认的宽度是104、这里我们通过设置size的属性修改一下宽度。5、再预览一下效果。是不是宽度减少了呢...
HTML中input和button设置同样高度却不能等高的原因
ShiYadong的专栏
09-10 9889
.text{ height: 45px; width: 180px; background: yellow; } .button{ height: 45px; width: 90px; backgro
css中input与button高度不一致的原因及解决方法
alokka的博客
05-07 4760
首先说下input和button高度不一致的原因 之前在学习react项目，写todolist的时候遇到了这样的小问题，查阅了一些资料 发现网上说什么的都有，五花八门，经过我查阅资料，发现对不齐是因为行内元素的基线是不同的，所以会导致高低不同。解决办法也很简单给每个元素加上 ↓ 就可以了。 vertical-align:middle; .target { vertical-a...
<button> 和 input button的对比（实实在在的被坑了一把!）
工匠
05-19 1847
标签 定义和用法  标签定义一个按钮。 在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。  控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。 与  标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按
input 高度多了2px
JackAfan
09-03 326
input 默认情况下会高了一点点像素 #con{ display:flex; } input,button { height:30px; line-height:30px; border:1px solid #000; } 使用box-sizing: border-box;解决~ input{ box-sizing: border-box; }
android 设置高度等于宽度,android – 设置按钮高度等于按钮宽度
weixin_39647180的博客
05-25 991
我在互联网上看到了很多这个问题,但所有解决方案对我都不起作用..所以这就是问题所在.我想要一个屏幕宽度为50％的按钮(工作正常).但现在我希望它与宽度具有相同的高度.不知怎的,这不起作用：Button button1 = (Button) findViewById(R.id.button1);int btnSize = button1.getLayoutParams().width;button1...
input框点击后发生位移的解决办法
elsa_yxy的博客
03-14 1515
在做案例的时候，出现了如下问题：input框点击后，发生了明显的位移。 百度了一圈，没有找到答案。 后来重新看了一下自己的代码，终于找到了原因。 原来是因为 input 的高度和行高 给的不一致导致的。 input { height: 26px; font-size: 12px; line-height: 20px; padding-left: 8px; outline: none; color: #666;
input & button对不齐、有间隙、高度不一致等问题解决方法
濮家大少
10-24 9155
1.input和button对不齐的原因 对不齐是因为行内元素的基线是不同的，所以会导致高低不同。 解决办法：每一个元素都加上下面即可； vertical-align:middle; 如下 .content{ width:200px; height:30px; vertical-align:middle; } .btn{ width:80px; heigh...
设置input的高度和宽度
03-29
可以使用CSS来设置input的高度和宽度，具体方法如下： 1. 设置宽度 可以使用width属性来设置input的宽度，例如： ```css input { width: 200px; } ``` 2. 设置高度 可以使用height属性来设置input的高度，例如...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值