如下图：

让input  宽度100%， 加边框并有左填充，这里如果用 padding-left: 的话，input 边框会超出100%的范围

后来发现 text-indet: XXpx; 即可实现即有左填充，又不会超出

*：此属性多适用于文字段落首2个字缩进 {text-indent:2em; }

input 框 宽度100%时 padding 超出问题解决的更多相关文章

  1. input 设置 width:100% 和padding后宽度超出父节点

    input 设置 width:100% 和padding后宽度超出父节点 添加如下css即可: box-sizing: border-box; -webkit-box-sizing: border-b ...

  2. js控制input框输入数字时，累计求和

    input框输入数字时,自动开始计算累加 <div class="form-group"> <label for="inputPassword3&quo ...

  3. 去掉input框点击时的默认颜色

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...

  4. 【小程序】<image>图片实现宽度100%时，高度自适应

    *.wxss样式设置 .img{ width:100% } *.wxml给<image>标签添加属性  mode="widthFix" <image class= ...

  5. 吐血bug-- 多个input框接连blur事件导致alert接连弹出

    本来今天想记录一下Flow在vue源码中的应用,结果临时触发了个bug... bug描述: elementUi + Vue 技术 需求:一个表格中有至少两条数据,每条数据都有input框,在失去焦点后 ...

  6. [TimLinux] JavaScript input框的onfocus/onblur/oninput/onchange事件介绍

    1. onfocus事件 input框获取到焦点时,触发了该事件,比如获取到焦点时,修改input框的背景色.这个功能其实可以使用css的伪类:focus来定义. 2. onblur事件 这个与onf ...

  7. input框输入手机号码分隔显示

    在input框输入手机号码时,自动加入空格按照3,4,4位显示,如: 实现方法如下: <label>手机号码</label><input type="text& ...

  8. 事件和方法的区别，以input框的blur事件为例

    1. 我们在原生的js中学到的事件 onblur 2. 使input框失去焦点的方法blur 3. jquery中的方法blur 是当input框失去焦点时触发的回调 三者是不相同的 事件:指的是一个 ...

  9. input框处理大全

    1.去掉谷歌input记住账号或密码时默认出现的黄色背景: 直接用css的内阴影来覆盖黄色(代码中 white可换成其他颜色) input:-webkit-autofill { -webkit-box ...

随机推荐

  1. solr-5.3部署到tomcat

    下载 solr 5.3 版本: http://www.apache.org/dyn/closer.lua/lucene/solr/5.3.0 下载 Tomcat(6以上版本),另外可以根据系统下载 3 ...

  2. 让webstorm支持avalon语法自动补全

    在file菜单下选择Settings,选择Editor ——> Inspections ——> Html ——> Unknown HTML tag attibute添加以下标签ms- ...

  3. Asp.net Mvc 使用EF6 code first 方式连接MySQL总结

    最近由于服务器变更为Linux系统.MsSql for Linux什么时候出来到生产环境使用还是要很长时间的.于是考虑使用Mysql数据库,ORM使用EF.于是先踩下坑顺便记录一下,有需要的tx可以参 ...

  4. 【BZOJ-4455】小星星 容斥 + 树形DP

    4455: [Zjoi2016]小星星 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 204  Solved: 137[Submit][Status] ...

  5. Hadoop中JAVA不经过Catch(Exception e)直接到finally或者退出原因

    原来是被变成Throwable抛出来了!而Exception是Throwable的子类,所以无法捕捉到,只有捕捉Throwable的时候,才可以将错误信息打印!

  6. install docker on xubuntu

    ref: https://docs.docker.com/engine/installation/linux/ubuntulinux/#/install-the-latest-version ps: ...

  7. [NOIP2014] 普及组

    珠心算测验 模拟. 将所有“两个不同数之和”装进桶里,扫描原数组记录满足条件的数的个数. /*by SilverN*/ #include<iostream> #include<alg ...

  8. PHP滚动日志

    PHP滚动日志类库 PHP记录日志,我之前接触过的有按照年月分文件夹,然后按照日分文件的日志记录方式,这种方式有利有弊,有他的使用场景,我今天要说的是另一种日志记录方式--文件滚动方式记录日志,当然了 ...

  9. java.io.IOException: No FileSystem for scheme: hdfs

    在这篇文章中,介绍了如何将Maven依赖的包一起打包进jar包.使用maven-assembly打成jar后,将这个jar提供给其他工程引用的时候,报出如下错误: log4j:WARN No appe ...

  10. list去除并且把值相加

    package list; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import ja ...