input输入框向下偏移，输入中文，字符数字下移一像素问题

最新推荐文章于 2024-05-30 15:07:12 发布
最新推荐文章于 2024-05-30 15:07:12 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： 笔记 文章标签： 前端 javascript html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47383870/article/details/128111380
版权

 

输入框本身的下移问题：b5e549af4a1b409992c66a102892d563.jpg

 如图，父级设置vertical-align为top或bottom。

 

解决输入汉字，字母和数字下移问题：

方法一

父级设置高度、行高以及input标签的高度设为相同的固定值。

方法二

 父级不设置行高line-height，input框不设置高度height， input框通过设置line-height、padding、font-size三个属性调整自身高度

 

m0_47383870
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
输入内容后input控件的位置改变
wd
09-29 4256
写了挺久的前端代码，不知道为什么之前没有遇到这个问题。既然遇到了，那么就在这里总结一下经验，遇到这个问题，是我在做一个搜索框的时候。并且最奇怪的是我输入英文和数字，控件位置不改变，但是只要输入汉字，那么位置就改变。由于这一点，我打消了用JavaScript来解决的想法，因为输入的代价太大，并且仔细想想肯定css可以解决这个问题的，下面是我解决的代码。input{ border:1px sol
input文本框设置字体大小后导致按钮位置偏移解决方案
zhang338448的博客
06-03 3160
今天写一个搜索框，遇到一点小问题，记录一下。 设置文本框和按钮在一行显示，两者高度一致，当设置文本框字体大小后，按钮位置发生偏移，如下图所示： 设置文本框字体大小前： 设置文本框字体大小后： 按钮位置明显向下偏移，网上查了一下，给文本框设置大小的同时，再设置垂直对齐方式为top即可，即 vertical-align: top; demo代码如下： <!DOCTYPE html> <html lang="en"> <head> <me
input标签里面的文字位置
热门推荐
北辰
11-11 1万+
水平对齐： <input type="button" value="按钮" style="width:80px;text-align:center" /> 垂直对齐： <!--可使用padding-top和padding-bottom来精确控制，例如文字靠下：--> <input type="button" style="padding-top:20px;...
解决input框上下偏移问题
hggl_bera的博客
06-21 9168
问题描述： input框和后边的按钮不能对齐 如下图所示： 采用的布局是 <div class="header"> <div class="header-text">全息画像查询系统</div> <div class="header-search"> <div class="input-box"&g...
Input输入框文字和placeholder文字颜色和位置如何设置
weixin_50236973的博客
03-02 2771
【代码】Input输入框文字和placeholder文字颜色如何设置。
【CSS】IE11浏览器下，文本框中输入汉字后，文本框的位置发生上下偏移的解决方法
ZLK1214的专栏
05-18 4046
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form method="post&a
JS验证input输入框（字母，数字，符号，中文）
01-19
只能输入英文 <input type=text onkeyup=value=value.replace(/[^a-zA-Z]/g,'')> 只能输入英文 <input type=text onkeyup=value=value.replace...只能输入数字： <input onkeyup=this.value=this.value.
jquery实现input输入框实时输入触发事件代码
10-26
如何实现input输入框实时输入触发事件，下面有个不不错的示例使用jquery实现的，感兴趣的朋友可以参考下
Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）
01-19
//必须保证第一个为数字而不是. obj[attr] = obj[attr].replace(/^\./g,); //保证只有出现一个.而没有多个. obj[attr] = obj[attr].replace(/\.{2,}/g,); //保证.只出现一次，而不能出现两次以上 obj[attr]
使用正则限制input框只能输入数字/英文/中文等等
10-26
限制input框只能输入数字或英文的方法有很多，下面为大介绍下使用正则是如何实现的，感兴趣的朋友不要错过
input 框如何移动光标，设置光标位置？
qq_43631129的博客
07-25 1097
input 框如何移动光标，设置光标位置？
input框点击后发生位移的解决办法
elsa_yxy的博客
03-14 1321
在做案例的时候，出现了如下问题：input框点击后，发生了明显的位移。 百度了一圈，没有找到答案。 后来重新看了一下自己的代码，终于找到了原因。 原来是因为 input 的高度和行高 给的不一致导致的。 input { height: 26px; font-size: 12px; line-height: 20px; padding-left: 8px; outline: none; color: #666;
武装的小鸟之用input控制物体移动
weixin_45996509的博客
10-25 56
用input控制物体移动 Vector2 pos = this.transform.position; pos.x += Input.GetAxis("Horizontal")*Time.deltaTime; pos.y += Input.GetAxis("Vertical") * Time.deltaTime; this.transform.position = pos;
js 键盘控制表格input上下左右移动
qq_24892029的博客
10-21 8116
//初始化获取的行列 var currentLine= 0; var currentCol=0; function keyDown(obj){     var _row = obj.parentNode;     currentCol = _row.cellIndex;     currentLine = _row.parentNode.rowIndex;      e=wi
el-input中的el-input__suffix行高问题
分享前端技术心得
05-26 1476
在使用el-element开发时，使用到了el-input组件，添加了clearable属性，由于业务要求更改了样式，但问题出来了，el-input默认的高度是40px，我这里改成了32px，外表看起来没啥问题，但将光标移到el-input上面并输入一些内容，出现el-input__suffix图标，会发现它的行高有点偏下。el-input在这里的高度是32px，我希望el-input__suffix图标的行高也是32px，这样看起来就要对齐一些。可是从控制台定位不到这个元素，因为鼠标一移开，它就消失。
input输入字体时抖动
疑问 搜索 动手 解决 记录
01-13 1882
问题描述 1. input输入字体时框内元素会整体下移一像素 也就是 1px 2. 目前全局字体大小是16px label字体大小也是16px ,相同,理论上讲不应该出现此问题. 代码 <div class="sign_login mb20"> <span>账号：</span> <input class="pl10"> <sp
JS测试出最小支持字体，以及修复PDFJS的文本错误偏移
sinat_27171121的博客
11-19 1216
如果浏览器的文本缩放不是100%，而PDFJS没有检测这一点，导致文本排布发生偏移。PDFJS的文本层有时会有一个错误的整体偏移，导致文本处于错误位置，导致用户选择错误的文本。浏览器还有一个“最小支持字体”的限制，
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 211
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
记录一次前端页面崩溃的产生及处理
最新发布
weixin_51123079的博客
05-30 369
记录一次前端页面崩溃的产生及处理
el-input输入框只能输入一位数字
05-24
如果你想让 `el-input` 输入框只能输入一位数字，可以通过设置 `maxlength` 属性为 1 来实现。同时，为了限制输入只能为数字，你可以在输入框的 `input` 事件中监听用户输入，然后通过正则表达式判断用户输入是否为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值