input标签中使输入文本向右偏移像素解决方案（亲测有效）

最新推荐文章于 2024-05-09 14:08:24 发布
最新推荐文章于 2024-05-09 14:08:24 发布
阅读量4.5k 收藏 1
点赞数 2
分类专栏： 前端 小程序 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyll19980812/article/details/115453910
版权

需求：在输入框中输入文本达到这样的效果：
在这里插入图片描述
之前是这样的效果：
在这里插入图片描述
尝试过很多博主的方法，大概就是以下几种：

  1. letter-spacing:10px;
  2. text-indent：10px
  3. <input type="button" value="按钮" style="width:80px; text-align:center" />对齐的自然没有用

都没有用，于是自己摸索了以下，用margin-left会导致整个输入框右移，那就用padding-left试试，结果还真可以
在这里插入图片描述

CodeLuweir
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
字体靠右代码_html中怎么把文字往右移
weixin_39875167的博客
12-19 1万+
html中怎么把文字往右移。。。。1. css如何使整个div中的整段文字右移1、为设置div靠右移动一点前代码：div向右移一定距离实例.box-a,.box-b{width:200px;height:100px; float:left}.box-a{ border:1px solid #00F}.box-b{ border:1px solid #F00}第一个(前者)div第二个(后者)...
多语言，input从右往左输入文字实现【目前解决了一半】
LavaStrom
05-04 1201
多语言，input从右往左输入文字实现 (1) 以下的input代码可以解决文字从右侧输入的问题 <input id="cc" class="cc" dir="rtl" autocomplete="off" maxlength="4000" type="text" placeholder="请输入内容" value="" /&g...
移动端input框设置从右侧输入，光标在右侧！！
最新发布
Kiey_Lee的博客
05-09 444
设置input框鼠标光标位置
实现 input框前有固定文字并且文字焦点向右对齐
weixin_48338881的博客
01-12 1630
实现 input框前有固定文字并且文字焦点向右对齐
HTML5中input输入框默认提示文字向左向右移动
热门推荐
Web_chicken的博客
09-08 1万+
HTML5中input输入框默认提示文字向左向右移动 首先演示input输入框代码 <style> * { margin: 0; padding: 0; } .sousuo { width: 458px; height: 34px; margin-left: 190px; margin-top: 200p
input输入汉字时发生细微偏移，数字和字母就不会，解决方法
weixin_42178670的博客
01-13 502
input输入汉字时发生细微偏移，数字和字母就不会，解决方法 input输入汉字时发生细微偏移，数字和字母就不会，解决方法是对input使用vertical-align垂直对齐方式
Vue + Element UI中表格组件（el-table）里的输入组件（el-input）中按下回车，使光标向右移动
也许明天 '的博客
01-16 675
在Vue中使用Element UI时，要实现在一个表格组件（el-table）里的输入组件（el-input）中按下回车，使光标向右移动。
js限制input标签中只能输入中文
10-24
主要介绍了js限制input标签中只能输入中文的的相关资料,需要的朋友可以参考下
HTML5中input输入框默认提示文字向左向右移动的示例代码
01-18
HTML5中input输入框默认提示文字向左向右移动首先演示input输入框代码 <style> * { margin: 0; padding: 0; } .sousuo { width: 458px; height: 34px; margin-left: 190px; margin-top: 200px; ...
chrome、firefox、IE中input输入光标位置错位解决方案
09-22
input输入框用一个背景图模拟，设置height和line-height一样的高度，使里面的输入文字能够居中，经测试chrome、firefox、IE中表现的情况有所不一，具体的解决方法如下，感兴趣的朋友可以参考下哈
网页设计中input标签写CSS时需要注意的几个问题
12-13
为了彻底解决搜索框的这些问题，我以GreenGaint主题搜索框的样式为准，重写了一遍代码并且以像素为单位测量了一下在没有任何样式表的情况下＜input>标签在默认浏览器中的实际差别。 结果发现：input标签在type为...
（HTML）实现 input用鼠标点击时，提示文字上移
m0_73155303的博客
05-02 768
（HTML）实现 input用鼠标点击时，提示文字上移
input搜索框如何限制输入字的左右距离
夜行岛夫
01-09 1196
input搜索如果不设置左右距离，效果是这样的： input搜索框限制输入字的左右距离： 实现代码： padding-right: 50px; padding-left: 30px; 我的个人网站：夜行岛夫的前端博客
html input标签使光标移动到文本的最后面
css470895871的专栏
12-27 6961
var content = "input元素";  content.focus();   var len = content.value.length;  if (document.selection) {     var sel = content.createTextRange();     sel.moveStart('character', len);     sel.coll
在两个输入框之间移动内容
weixin_30786657的博客
08-28 93
<body> <select id=s1 multiple="multiple" size="7"> <option>123</option> <option>234</option> <option>456</option> <option>678</option&...
input框点击之后提示信息缩小上移
HouMengFei_的博客
06-17 580
input框点击改变字体大小并上移 1. 点击之前 2. 点击之后 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style>
从细节入手：点击输入框，提示文字瞬间变身小精灵
Shids_的博客
12-01 3148
从细节入手：点击输入框，提示文字瞬间变身小精灵
input标签中使输入文本向右偏移像素
weixin_30432179的博客
09-20 2542
text-indent：10px 转载于:https://www.cnblogs.com/qdphr/p/5888727.html
获得 input 标签中的文本
05-30
你可以使用 JavaScript 中的 value 属性来获取 input 标签中的文本。例如，如果你有一个 id 为 input1 的输入框，你可以使用以下代码来获取它里面的文本： ```javascript var inputText = document.getElementById...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值