input css padding

已于 2024-02-28 17:20:05 修改
阅读量339 收藏
点赞数 2
分类专栏： js-flex 文章标签： css
于 2024-02-28 17:16:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/spencer_tseng/article/details/136351435
版权
本文讨论了在HTMLJSP中外套控件的常见问题，指出AdobeAS控件的局限可能在于内层控件尺寸不能超出外层，解决方法是调整CSSpadding，设置明确的宽度和高度。

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

这样控件会跑出外套控件在HTML  JSP里面是经常出现的。但有些外国adobe的as控件不存在这种情况，这是因为内层控件定义的时候不能超出外层控件的范围。

修改下：去掉原来css padding，然后加上宽度和高度

CSS的Padding, Margin, Border 的区别
oscar999的专栏
12-16 1207
CSS 的Padding 、Margin 和Border 设置原理。 盒子模型
针对input添加padding后宽度变化问题
casanover
10-13 7480
input在限定宽度的情况下，有时候由于input本身输入的文字太过于靠近左边，视觉效果差，所以往往会增加一个padding-left的操作来使得里面的文字稍微有边距，这个时候会发现限定宽度的input宽度发生了变化。 解决办法： 在input里添加box-sizing: border-box;//其他浏览器 -webkit-box-sizing: border-box;//谷歌 -moz-
【记】IE下input标签中的padding-left和padding-right
weixin_30823001的博客
02-06 290
最近遇到一个问题，那就是input在IE系列中对padding的支持不够好。如果我们给input定义padding-left和padding-right，希望输入的文字距离左右边框有一定的距离，再加上背景图片，实现一个像bing那样的输入框效果。但是，这样的想法固然好，但是在IE下会不尽如人意。查看bing的搜索框才知道，原来它的的搜索框图片和输入文字根本就不是一个input搞定的，而...
解决父元素的padding对子元素的input失效问题
Rookie
01-16 1165
文章目录问题描述解决方案方案一方案二更多方案结语 问题描述 在一个含有padding的div元素中包含一个input标签和一个icon，但是input元素显示异常。（具体表现为父元素的padding对子元素的input失效） 异常效果图： 案例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Taoism</title> <s
CSS - 基础篇
陆克和他的那些代码
05-22 489
什么是CSS？CSS指层叠样式表（Cascading Style Sheets），样式通常存储在样式表中。 CSS 作用：可以让相同的一个页面在不同的浏览器当中呈现相同的样式。 老师上课第一句话：先学主干（最常用），再学分支。否则一开始从细节开始学，永远都学不完，效率也底，信心也打击。 语义化——i:小图标；b:数字； ul li:导航栏、列表、功能模块(ol一般不用)； p/span:文字......
控制input的CSS但不影响CheckBox以及Radio的样式
09-05
当我们需要对页面中的所有`input`元素应用统一的样式时，通常会编写全局的CSS选择器，如`input {}`。然而，这样的做法可能会无意中影响到特定类型的输入元素，如`checkbox`和`radio`，导致它们的显示效果与预期不符...
CSS 盒模型详解：从内边距padding到边框border
最新发布
前端基地
09-24 1446
本文主要介绍 CSS 盒模型，包括盒模型介绍、padding（内边距）的相关内容如区域有颜色、一些标签默认带 padding 及小属性等，还有 border（边框）可按三要素、方向、每个方向每个要素拆分等，为读者全面呈现 CSS 盒模型知识。
css input[type=file] 样式美化(input上传文件样式 )
01-19
效果： <!doctype html> <html> <head> <meta charset=utf-8>... padding: 4px 10px; height: 20px; line-height: 20px; position: relative; cursor: pointer; color: #888
谷歌和火狐浏览器下的input的padding不同表现
樊小书生
09-24 2709
谷歌和火狐浏览器下的input的padding不同表现，input在PC端和移动端的布局差别。
解决input宽度设置成100%与padding的冲突
weixin_30498807的博客
02-26 550
一、问题描述 我是流体布局控，经常会遇到文本框以及文本域宽度100%自适应显示的情况。 如下效果图： 在窄屏下，上面的文本框宽度也要跟着外部宽度变小。 难点 对于文本框或者文本域，光标最好距离左侧边缘有一定的间距。因此，我们基本上都有类似下面的设置： input { padding-left: 10px; } 但是，如果只考虑文本框本身（父标签无其他特殊处理），这一套在流...
ios下input框的默认padding问题
weixin_46067773的博客
11-13 692
ios下input框的默认padding问题 如图上面的 公司1 是div，下面的两个11是input框 两侧的padding值相同但是输入内容后去却对不齐 解决方法 给input 加 样式 box-sizing: border-box; padding: 0; 解决问题
padding 后尺寸变化 设置_input加了padding后宽度变化
weixin_29230773的博客
02-02 441
demo.content{display: flex;}.box{flex:1;border: 1px solid #000;}.inputMsg{width: 100%;padding:0 20px;-webkit-box-sizing: border-box;}.left,.right {width:100px;background: #ccc;}input的样式加入box-sizing: b...
input元素有padding间距，所以使用box-sizing来保持宽度不超出父元素
weixin_34247032的博客
03-04 354
http://vicbeta.com/code/2013/04/24/phone-over-width.html   手机web开发资料少，原创解决方案Mark。 手机页面遇到一个横竖屏切换时出现的问题。为满足不同分辨率下正常显示，页面的input元素宽度需要撑满整个父级元素，而父级元素则是占满整行的，由于input元素有padding间距，所以使用box-sizing来保持宽度不超出父元素...
input padding宽度问题
weixin_30516243的博客
10-10 201
input的width不包括padding 除非用css3的box-sizing:border-box;，这样你的宽就等于内边距+边框宽度了 转载于:https://www.cnblogs.com/lizhenlzlz/p/5945415.html
input元素的padding border margin的区别
weixin_30414245的博客
10-31 166
padding内(不包含padding)的部分才是可输入部分，也是width和height标明的区域。padding的部分加上width和height部分是background的部分。padding的外部是border的部分，border的外部是margin的部分。 padding的宽度是不再width和height中的。 2013-10-3116:29:22 转载于:https://ww...
IE9以下的input设置padding兼容问题的解决方案
qq_35187119的博客
05-09 743
问题：最近开发一个项目时发现，给input加上padding，在IE9以下浏览器中，会把原本的input宽度撑大的问题，也就是说，同样的代码，在IE9以下的浏览器中查看和在其他浏览器会不一样，这个细节问题在开发一些列表式的布局中会被设计师和测试人员紧追不舍，因为它永远不能在所有浏览器中和其他div或表单对齐。 原因：IE9以下的浏览器支持CSS2.1，而CSS2.1规定对于box-sizing的...
探索Input框特效：CSS与图片样式的完美结合
本篇将详细探讨如何制作既美观又功能齐全的Input框，它们支持通过CSS或者图片来进行样式定制，从而提供更好的用户体验。 首先，让我们探讨一下HTML中的Input元素。HTML中的Input元素是表单元素之一，用于创建交互式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值