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

http://vicbeta.com/code/2013/04/24/phone-over-width.html

 

手机web开发资料少,原创解决方案Mark。

手机页面遇到一个横竖屏切换时出现的问题。为满足不同分辨率下正常显示,页面的input元素宽度需要撑满整个父级元素,而父级元素则是占满整行的,由于input元素有padding间距,所以使用box-sizing来保持宽度不超出父元素,代码如下:

  1. <inputtype="text"class="text_input w_100"name="phone"id="phone"/>
  1. .text_input {
  2. box-sizing: border-box;
  3. padding:.8em;
  4. border:1px solid #E2E2E3;
  5. background:#FFF;
  6. font: normal 16px/1'SimHei';
  7. border-radius:3px;
  8. outline: none;
  9. }
  10. .w_100 {
  11. width:100%;
  12. }

竖屏打开时页面显示正常

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值