针对input添加padding后宽度变化问题

最新推荐文章于 2024-07-26 14:59:29 发布

Casanover

最新推荐文章于 2024-07-26 14:59:29 发布

阅读量7.3k

点赞数 4

分类专栏： css

本文链接：https://blog.csdn.net/wzj2584454/article/details/78229753

版权

css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

input在限定宽度的情况下，有时候由于input本身输入的文字太过于靠近左边，视觉效果差，所以往往会增加一个padding-left的操作来使得里面的文字稍微有边距，这个时候会发现限定宽度的input宽度发生了变化。

解决办法：

在input里添加

box-sizing: border-box;//其他浏览器
-webkit-box-sizing: border-box;//谷歌
 -moz-box-sizing: border-box;//火狐

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Casanover

关注关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

移动端h5 输入框padding-left会导致放大

Genge

12-18

3051

移动端html5 输入框padding-left会导致放大解决办法： input { width: calc(100% - 10px); padding-left: 10px; } 目前而言，好的解决之道是width和padding均采用百分比值，例如下面这样： firefox低版本可能存在问题 input { width: 92%; padding-le

【记】IE下input标签中的padding-left和padding-right

weixin_30823001的博客

02-06

272

最近遇到一个问题，那就是input在IE系列中对padding的支持不够好。如果我们给input定义padding-left和padding-right，希望输入的文字距离左右边框有一定的距离，再加上背景图片，实现一个像bing那样的输入框效果。但是，这样的想法固然好，但是在IE下会不尽如人意。查看bing的搜索框才知道，原来它的的搜索框图片和输入文字根本就不是一个input搞定的，而...

1 条评论您还未登录，请先登录后发表或查看评论

YOLOv5改进 | 注意力机制 | 二阶注意力网络来进行单图像超分辨率【附网盘完整代码】

最新发布

kay_545

07-26

1195

yolov5改进，yolov5涨点，yolov5，SOCA

css3属性

weixin_30606461的博客

09-11

151

-webkit-text-size-adjust：100%|none; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; 值描述 content-box 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高...

【CSS】Padding会增加元素大小

It_sharp的博客

11-18

1690

代码 &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;style&amp;gt; #one{ width:200px; height:100px; padding:10px; margin:20px; background-color:#EFEFEF; } &amp;lt;/style&amp

uniapp 小程序组件input输入框加padding，苹果手机点击padding不调起键盘

qq_42859450的博客

07-08

1106

给input设置高度

CSS - 基础篇

牧码的博客

05-22

444

什么是CSS？CSS指层叠样式表（Cascading Style Sheets），样式通常存储在样式表中。 CSS 作用：可以让相同的一个页面在不同的浏览器当中呈现相同的样式。老师上课第一句话：先学主干（最常用），再学分支。否则一开始从细节开始学，永远都学不完，效率也底，信心也打击。语义化——i:小图标；b:数字； ul li:导航栏、列表、功能模块(ol一般不用)； p/span:文字......

超详细 ElementUI 源码分析 —— Input

前端学习博客

03-17

2576

最近在学习 Vue 框架，想深入了解一下组件化开发以及封装组件库的思想，而 ElementUI 作为这方面做的最好的也是最常用的组件库，它的源码一定有很多值得我们去学习的地方，所以去 ElementUI 官网和 Github（来都来了，给个 star）看了一下，决定边学习组件库边看源码，并把学习中的收获和疑问记录下来，预计会需要很长很长时间才能看完，但是为了提高自（gong）己（zi），还是静下...

22.React Native避免键盘对TextInput遮挡一

Tiger的专栏

09-19

3675

目录 1.KeyboardAvoidingView 2.react-native-keyboard-aware-scroll-view 3.Keyboard Module 4.QQ聊天示例 4.1实现类似QQ聊天效果，点击输入框以后可以继续停留在未弹出键盘的位置； 4.2键盘显示或隐藏总是滚到底部键盘遮挡在开发中难免会用于（TextInput）输入框，可能会遇到键盘遮挡Tex...

html上传图片的原理,html自定义文件上传控件样式input:file方法总结

weixin_33677704的博客

05-31

1825

大家可能都知道在html中的input file文件上传控制默认风格与样式很难看了，下面我找到了几种比较实用的自定义文件上传框样式的方法，大家一起来看看。例1 一千个浏览器就有一千个默认控件样式如何自定义文件上传控件样式？原理：把浏览器提供的默认控件样式隐藏，给控件外框添加自定义样式。兼容性：兼容所有浏览器。HTML: 代码如下复制代码浏览…CSS:.input-file{displa...

12个HTML和CSS必须知道的重点难点问题

Lee的博客

05-19

8433

这12个问题，基本上就是HTML和CSS基础中的重点个难点了，也是必须要弄清楚的基本问题，其中定位的绝对定位和相对定位到底相对什么定位？这个还是容易被忽视的，浮动也是一个大坑，有很多细节。这12个知识点是我个人认为的，下面我们就来看看这12个知识点。1.怎么让一个不定宽高的 DIV，垂直水平居中?使用Flex只需要在父盒子设置：display: flex; justify-content: cen...

html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素

weixin_39672443的博客

06-07

5818

目录概述在div+css中，了解块级元素和行内元素还是非常有必要的，比如：对行内元素使用width属性就会失效。虽然自己不是做前端的，但是，在项目中，曾经也弄过从前端布局，也吃过这方面的亏。今天，群里有朋友问起这个，就趁着学习一下，也算是查漏补缺吧，虽然，谈不上精通，但是了解，还是很有必要的。盒子模型css盒子模型分为两种，一种是遵循w3c标准的标准盒子模型，另外一种就是IE盒子模型。标准盒子模型...

input css padding

qq 117791303

02-28

304

input css padding

解决input宽度设置成100%与padding的冲突

weixin_30498807的博客

02-26

500

一、问题描述我是流体布局控，经常会遇到文本框以及文本域宽度100%自适应显示的情况。如下效果图：在窄屏下，上面的文本框宽度也要跟着外部宽度变小。难点对于文本框或者文本域，光标最好距离左侧边缘有一定的间距。因此，我们基本上都有类似下面的设置： input { padding-left: 10px; } 但是，如果只考虑文本框本身（父标签无其他特殊处理），这一套在流...

ios下input框的默认padding问题

weixin_46067773的博客

11-13

636

ios下input框的默认padding问题如图上面的公司1 是div，下面的两个11是input框两侧的padding值相同但是输入内容后去却对不齐解决方法给input 加样式 box-sizing: border-box; padding: 0; 解决问题

input元素有padding间距，所以使用box-sizing来保持宽度不超出父元素

weixin_34247032的博客

03-04

329

http://vicbeta.com/code/2013/04/24/phone-over-width.html 手机web开发资料少，原创解决方案Mark。手机页面遇到一个横竖屏切换时出现的问题。为满足不同分辨率下正常显示，页面的input元素宽度需要撑满整个父级元素，而父级元素则是占满整行的，由于input元素有padding间距，所以使用box-sizing来保持宽度不超出父元素...

input padding宽度问题

weixin_30516243的博客

10-10

175

input的width不包括padding 除非用css3的box-sizing:border-box;，这样你的宽就等于内边距+边框宽度了转载于:https://www.cnblogs.com/lizhenlzlz/p/5945415.html

vue中css使用padding-left导致input框变长

Bright2017的博客

01-23

3077

问题是这样的，我需要做一个响应式的登录框，宽度不能设置死，我是使用的element-ui框架做的。发现页面当中账号和密码这一行的长度要比下面多出来。仔细检查代码发现，取消了padding-left：20px；之后就正常了。解决方式， 1.改成缩进即可，text-indent:20px; 2.这是因为盒子模型不同。简单说，两种模式，一种是当前的元素宽高包含了padding，一种是不包

微信小程序input宽度根据填写文字变化

05-05

可以通过监听 input 组件的输入事件，获取输入内容的长度，然后动态设置 input 组件的宽度。具体实现步骤如下： 1. 在 input 组件上绑定输入事件： ``` <input bindinput="onInput" /> ``` 2. 在对应的 Page 或 Component 中定义 onInput 方法： ``` onInput: function(event) { const inputLength = event.detail.value.length const inputWidth = inputLength * 16 + 'rpx' this.setData({ inputWidth: inputWidth }) } ``` 3. 在 data 中定义 inputWidth 变量，初始值为一个合适的宽度： ``` data: { inputWidth: '200rpx' } ``` 4. 在 input 组件上绑定动态的样式： ``` <input bindinput="onInput" style="width: {{inputWidth}}" /> ``` 这样，当用户输入内容时，input 组件的宽度会根据输入内容的长度动态变化。其中，16 和 'rpx' 是示例值，可以根据实际情况进行调整。