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

添加如下css即可:

 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
时间: 2024-10-27 17:04:51

input 设置 width:100% 和padding后宽度超出父节点的相关文章

css top,right,bottom,left设置为0有什么用?它和width:100%和height:100%有什么区别?

 壹 ? 引 当我们使用position属性时,总免不了与top,left,right,bottom四个属性打交道,那么这四个属性都设置为0时有什么用,与宽高设置100%又有什么区别?本文对此展开讨论.  贰 ? 关于top left right bottom position定位属性大家都不会陌生,添加position属性的元素可以定位,而top,left,right,bottom属性决定元素定位后所在的位置,而在使用定位属性需要注意两点: 第一点,top,left此类定位属性只对添加了pos

Bootstrap "row"类宽度超出问题

问题产生原因: 页面用Bootstrap的栅格系统来布局,类col-xs-*左右会有15px的padding,该类下有元素img希望顶边展示,这就需要给col-xs-*类添加额外的样式:padding:0px; 如此做后,该类底下若再有row类,会出现该元素宽度超出父元素宽度. 解决方法: 为后来的row类添加样式:100%: 示例代码: <div class="row"> <div class="col-xs-12" style="pa

元素width:100%; 设置padding出现横向滚动条的问题

当我们给块元素设置宽度为100%,然后再设置padding值想让里面的内容有一定的内边距时,会发现此时内边距的效果达到了,但是却出现了横向滚动条, 原因:padding 是边框和里面内容之间的间隙,如果你设置了padding,padding的值是不变的,当内容+padding大于容器时,它会以容器的左上角为中心,保持padding的距离向外扩展,因此出现了滚动条,正常解决办法是,将元素宽度减去padding值的2倍,但是现在元素宽度值并不是具体的px值,而是百分数, 这种情况下解决办法有两种:1

使用 &lt;embed&gt; 标签显示 flash文件(swf)格式 ,如何设置 width 和 height 宽度,高度.

1. embed 标签 支持  .swf 格式.     .flv 的不支持. 2. 通常情况下, 网站中上传 多个 flash文件. 它的默认大小是不一样的. 而且 可以 宽度 大于 高度(横向的) ;  宽度 小于 高度 (竖向的) . 此时. 最好的的办法 是给 <embed> 设置 一个 固定的 宽度 和高度 . 此时flash 会自动缩放. 至于缩放比例: 如果 先 碰到 高度 , 那么 flash的高度就是 embed的 设置的高度,  宽度等比例缩放; 如果 先碰到宽度,   那

Google Chrome input 设置 line-height 后光标变得和input一样高

Google Chrome input的height和line-height设置为相同的比默认高度高的值时,当input控件获得焦点并且没有输入内容时,input中的光标会占满整个input控件(如果设置了padding-top或padding-bottom则会低于整个控件的高度),但输入内容后光标高度又马上恢复为字体的高度,效果图和案例代码如下,那么怎么解决这个问题呢? <!DOCTYPE html> <html> <head> <title>line-h

ImagView大图片显示,设置margin或者padding后显示比例不协调问题

问题描述:设置一个ImageView的background属性,设置一张大图片时,再设置margin或者padding后缩放比例就不协调,即便是设置android:scaleType=""后也没有效果. 解决办法:把ImageView的宽和高设置固定,这样就不会出现缩放比例不协调的问题.

CSS的width:100%和width:auto区别

CSS的width:100%和width:auto区别 一.   问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和名称换行显示了,但是在IE8和IE9下则显示正常.定位到问题后,最终发现是下面的属性导致的,如下图红色所致,把width的值设置为auto后即可解决问题: .TreeView,.TreeView ul{ padding:0px 0px 0px  19px; list-style:none; marg

css中width:auto和width:100%的区别是什么

width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加而增加,随着浏览器的宽度而换行 width:auto和width:100%的区别: 一.width:auto 1.块级元素默认的宽度值,意味着浏览器会自己选择一个合适的宽度值. 2.内容的宽度='margin-left' + 'border-left-width' + 'padding-left'

web前段设计之痛:手机浏览器和pc浏览器的width:100%的自适应问题

Tips: 调试 iPad 或 iPhone 可在设置中启动调试模式,在 Mac 中的 Safari 浏览器 同样开启开发者模式后,进行联机调试.功能彪悍. 最近在做一个页面时,发现在 iPad 的 Safari 浏览器中背景显示不全,定位到该 div 后发现所指定 css 的宽度为 100% : 到百度搜索后发现,safari 中 viewport 默认宽度为 980px,若事先未指定其初始 viewport 宽度,则会默认按照 980px 处理. 可以默认初始化 viewport 宽度或在