JSP页面，同一行的input和img标签的高度不一样

最新推荐文章于 2024-02-13 19:10:23 发布
最新推荐文章于 2024-02-13 19:10:23 发布
阅读量1.5k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JSP页面 css 文章标签： input img 标签高度不一样 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zifengye520/article/details/45953361
本文探讨了在网页设计中遇到的一个常见问题：如何确保输入框和紧随其后的图片按钮在同一水平线上显示。通过提供CSS样式的解决方案，包括使用vertical-align属性，帮助开发者轻松调整布局，实现美观且一致的设计。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在页面中，前面一个输入框，后面紧跟着一个图片按钮，结果img的标签比input标签高一点，有的浏览器正常，有的浏览器不正常

可以给标签加上下面的样式：

input,img{vertical-align:middle;}

有一点不知道为什么，写成上面的可以正常显示，但是写成

input{vertical-align:middle;}

img{vertical-align:middle;}

就不行了

[网络安全自学篇] 十四.Python攻防之基础常识、正则表达式、Web编程和套接字通信（一）
杨秀璋的专栏
09-29 2万+
这是作者的系列网络安全自学教程，主要是关于网安工具和实践操作的在线笔记，特分享出来与博友共勉，希望您们喜欢，一起进步。前文分享了Wireshark抓包原理知识，并结合NetworkMiner工具抓取了图像资源和用户名密码，本文将讲解Python网络攻防相关基础知识，包括正则表达式、Web编程和套接字通信。本文参考了爱春秋ADO老师的课程内容，这里也推荐大家观看他Bilibili和ichunqiu的课程，同时也结合了作者之前的经验进行讲解。
Web-拾贝
oscar999的专栏
03-10 1万+
JavaScript MVC框架PK：Angular、Backbone、CanJS与Emberhttp://www.youkuaiyun.com/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站， 有browser兼容的介绍http://help.dottoro.co...
如何让input和img水平对齐（转载）
weixin_30279671的博客
03-01 574
将input和img放同一行，img标签总是比input高出一个头，非常难看。之前试过好多方法，都不行。后来在网站搜到最多的就是给img添加一个align="absmiddle"属性，这个方法似乎的确可行，但是不符合HTML标准。后来无意中发现同时给input和img添加vertical-align:middle就行： input,img{vertical-align:middle;}这样...
HTML：让img标签和input标签水平对齐一样高
KaiSarH
11-09 1374
让img标签和input标签水平对齐一样高
java里jsp边框大小_java – INPUT框大小的边框,在Chrome中的TD问题中具有100％的高度和宽度...
weixin_30894765的博客
02-28 551
我找到了一个几乎完全相同的情况来开采here.但是接受的答案对我不起作用所以我希望我能提出一个新问题.下面的pic是我想要在所有主流浏览器中实现的(至少IE8,Firefox和Chrome).置于TD内的INPUT填充了父母的宽度和高度. 我的问题是,我无法在Chrome中使用以下代码段完成此操作.提前致谢更新：我在Chrome上的问题解释说：如果仔细观察,顶部和底部边框有1或2px填充.这是我在...
无需js 超级简单 一行代码 实现 输入框高度自适应 / 输入框根据内容高度撑开
fucaijin的博客
12-13 613
工作中需要用到一个自适应高度的输入框，要能根据的内容高度撑开输入框的高度。找了半天都很复杂，反正我是笨看不懂也懒得看，只能自己撸一个了。 本文不是使用textarea实现的，而是使用的contenteditable="true"属性，非常简单的实现元素内的内容可编辑。由此实现模仿textarea自适应 / textarea高度自适应的效果。 没有效果图的文章不是好文章，废话不多说先...
jsp同行按钮对齐
wz2209790775的博客
11-27 758
<div style="display: inline-block;margin-left: 10px"> <button type="button" onclick="submitQuery()" class="btn btn-primary"> 搜索 </button> <button type="button" onclick="clearall()" class=".
20-HTML与HTML5常用标签(前端)
weixin_42688085的博客
12-24 1141
感谢你的路过，希望学生的笔记能给你一点微不足道的参考 Java基础思维导图，完整Java体系的链接 一，B/S: Browser/Server 浏览器/服务器端 * 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序 * 优点： 1. 开发、安装，部署，维护 简单 * 缺点： 1. 如果应用过大，用户的体验可能会受到影响 2. 对硬件要求过高 B/S架构详解 * 资源分类： 1. 静态资源： * 使用静态网页开发技术发布的资源。 * 特点： * 所有
Javaweb基本内容和部分项目流程（IDEA安装+Tomcat配置）
最新发布
kertnudserf56968的博客
02-13 1077
供自己回看的粗略笔记
MySQL、JDBC、HTML、CSS、JavaScript、jQuery、tomcat、Http、Servlet、JSP、EL、JSTL、Maven、Cookie、Session（框架第一部分）
wrh0740的博客
07-10 5350
第一章 MySQL 1. 数据库 1、什么是数据库？ 所谓的数据库就是指存储和管理数据的仓库 2、数据库有哪些分类？ 3、什么是关系型数据库？ 底层以二维表的形式保存数据的库就是关系型数据库 stu-学生表 4、常见的关系型数据库有哪些？ Sql Server：微软提供，收费，适用于一些中型或大型的项目中，在java中的使用占比不高（.NET中使用的较多） Oracle：甲骨文公司提供，收费，适用于一些大型或者超大型的项目中，在java中的使用占比非常高 mysql：瑞典MySQLAB公司提
js实现动态改变table高度
kikumaru714的博客
01-09 2190
左右两个table，各占页面的一半，左边的table“名字”可能会很长，要求名字全部显示，所以就要折行显示。但是折行显示后高度就会变化，要求右边的table高度和左边一样。而且随着页面放大缩小table的高度始终一致。 而右边的table放的是文件名的超链接，要求超过五个文件就要显示滚动条。所以右边是将table放在了div中，给div固定了高度，加了纵滚动，所以设置两边一般高就是让右边div的...
input表单的type属性详解，不同type不同属性之间区别
11-14 2606
目标：详解表单input标签type属性常用的属性值 一、input标签和它的type属性PS：input 元素可以用来生成一个供用户输入数据的简单文本框。 在默认的情况下， 什么样的数据均可以输入。而通过不同的type属性值，可以限制输入的内容。 二、总结1、text 一个单行文本框，默认属性值2、password 隐藏字符的密码框3、search 搜索框，在某些浏览器中输...
设置html中input输入框的宽度、高度以及输入框的圆角
热门推荐
YMYYZ的博客
07-12 2万+
设置html中input输入框的宽度、高度以及输入框的圆角border-radius
Element ——Input 输入框高度调节
小胡的博客
04-09 1万+
Input 输入框高度调节不换行 css片段 #height{height: 80px;} 效果图（height:80px;） --------------------------------------------------------------------分割线-------------------------------------------------------...
如何更好地控制input输入框的高度
04-06 9444
很久以前 Roger Johansson 就在他的 blog 上做了一个 用样式控制表单元素 的测试 , 告诉我们企图用样式控制表单元素是一件不可能的事情 using CSS to style form controls to look exactly the same across browsers and platforms is impossible 甚至 css2.1 规范
html之给文本框设置宽度和高度...
weixin_33811961的博客
05-15 2512
今天在访QQ空间登录界面时，感觉其文本框的宽度和高度都好大呀，截图如下: 我很好奇其是怎么实现的，百度了一下，呵呵，其实不难嘛，代码如下: <input name="" type="text" style="width:200px; height:20px;" /> 转载于:https://www.cnblogs.com/friendan/archive/2012/05...
input submit标签的高度和宽度与input text的差异
weixin_30783913的博客
05-26 919
<input type="text"> 时设置input的高度和border，最后元素的高度和宽度包含了border的值。 <input type="submit">时同样设置了input的高度和border宽度值，但是最后input显示的高度值仅为input css代码设定的高度值。 如下所示：CSS中Input height设置为18px,border设置了1px，...
多个<li>标签在同一行显示
weixin_33744854的博客
02-22 1946
2019独角兽企业重金招聘Python工程师标准>>> ...
使用DHTML技术：jsp页面弹出页面与对话框
"在JSP页面中实现同时弹出页面和对话框的技术" 在Web开发中，特别是使用Java Server Pages (JSP)时，有时我们需要在用户交互时展示额外的信息或者获取用户的输入，这时就可以利用DHTML（Dynamic HTML）中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值