input元素有padding间距,所以使用box-sizing来保持宽度不超出父元素
http://vicbeta.com/code/2013/04/24/phone-over-width.html
手机web开发资料少,原创解决方案Mark。
手机页面遇到一个横竖屏切换时出现的问题。为满足不同分辨率下正常显示,页面的input元素宽度需要撑满整个父级元素,而父级元素则是占满整行的,由于input元素有padding间距,所以使用box-sizing来保持宽度不超出父元素,代码如下:
- <inputtype="text"class="text_input w_100"name="phone"id="phone"/>
- .text_input {
- box-sizing: border-box;
- padding:.8em;
- border:1px solid #E2E2E3;
- background:#FFF;
- font: normal 16px/1'SimHei';
- border-radius:3px;
- outline: none;
- }
- .w_100 {
- width:100%;
- }
竖屏打开时页面显示正常
input元素有padding间距,所以使用box-sizing来保持宽度不超出父元素的更多相关文章
- div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...
- 关于IE处理margin和padding值超出父元素高度的问题
两个div,父div有padding值,子div有margin-top值,浏览器在解析实际父子位置关系时,他们之间的距离是父padding+子margin-top.现在把父div设置固定高度,并有意让 ...
- KnockoutJS中父元素有click绑定引起checked绑定时失效
KnockoutJS中的checked绑定如果父元素有click绑定,会出现状态点击没反应,实际KO的值已经变化的情况. 这种情况下应该在checked绑定的元素上除了阻止事件冒泡,另外还需要额外加上 ...
- input 设置 width:100% 和padding后宽度超出父节点
input 设置 width:100% 和padding后宽度超出父节点 添加如下css即可: box-sizing: border-box; -webkit-box-sizing: border-b ...
- IE8下 input标签内padding失效
在做网页兼容时 发现在ie8下的input内用padding失效 为了达到居中文字的效果 使用line-height可以解决问题
- padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法
盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...
- input 元素 相对父元素错位
<div class="recommend"> <i class="iconfont icon-user"></i> < ...
- 使用padding后内容超出父级元素
解决方法:
- 定位之float 同一父元素的float相互影响,float是margin盒子在父元素的padding盒子内
随机推荐
- Altium Designer 覆铜时过孔连接形式的设置——只将过孔连接设置为Direct Connect
Altium Designer 在PCB覆铜时,所有的过孔和焊盘都是十字连接即Relief Connect连接的,没有像PROTEL 99SE一样只有接地的焊盘才是十字连接而过孔是直接连接的. 如下图 ...
- NSIS脚本调用C语言写的插件
其实NSIS的官网已经提供了很多别人开发的插件了,今天需要用到GetVersion这个插件,这是不维护的插件了,不推荐用,但是由于现实中的问题,导致我不得不用这个插件. 所以就下载下来了. 下载下来之 ...
- ELK 下载地址elastic
lasticsearch 2.3.5 Elasticsearch can also be installed from our repositories using apt or yum. See R ...
- 【No system images installed for this target】的解决方式
打开eclipse,新建安卓SDK模拟器时,选择完Target之后,再选择CPU/ABI时,默认为No system images installed for this target. 且无法编辑: ...
- HashMap Collision Resolution
Separate Chaining Use data structure (such as linked list) to store multiple items that hash to the ...
- JFrame画图基础和事件监听
消息框 JOptionPane.showMessageDialog(mine.this, "删除不成功!"); 画图 class MyJPanel extends JPanel / ...
- security
- centos6.4安装Vmware exsi CLI
1,Vmware官网Exsi CLI下载链接 https://download2.vmware.com/software/sdk/VMware-vSphere-CLI-4.1.0-254719.x86 ...
- 齐B小短裙
女模周蕊微博引关注 火了齐B小短裙毁了干爹[图]_网易新闻中心 齐B小短裙
- Spring事务管理器分类
Spring并不直接管理事务,事实上,它是提供事务的多方选择.你能委托事务的职责给一个特定的平台实现,比如用JTA或者是别的持久机制.Spring的事务管理器可以用下表表示: 事务管理器的实例 目标 ...