蕾紫喵
蕾紫喵
  • 发布:2017-10-03 14:34
  • 更新:2017-10-03 16:23
  • 阅读:1040

input 上下距离兼容问题

分类:HBuilder

如何解决兼容问题!

2017-10-03 14:34 负责人:无 分享
已邀请:
王者地带

王者地带 - 5+混合APP开发教程网 | http://www.html5-app.com | 咨询QQ: 2564034335

你的代码贴出来瞧瞧,

蕾紫喵

蕾紫喵 (作者) - 萌新——正在努力奋斗中.............

.K_A_1{width: 590px;height: 30px;margin: 15px 0;}
.K_A_1 span{width: 60px;height: 30px;display: inline-block;text-align: right;font-size: 14px;line-height: 30px;margin-right: 15px;float: left;}
.K_A_1 input{margin:0;width: 200px;height:18px;padding: 5px;border-radius: 3px;border: solid 1px #c9c9c9;}

K_A_3_1{width: 164px;height: 28px;float: left;}

K_A_3_1 input {width: 155px;height: 28px;padding: 0 7px 0 0;border: 0;}

<div class="K_A_1">
<span>手机号</span><div id="K_A_3"><span>+68</span><div id="K_A_3_1"><inputtype="text" />
</div>
</div>
</div>

王者地带

王者地带 - 5+混合APP开发教程网 | http://www.html5-app.com | 咨询QQ: 2564034335

我发现不是兼容性问题,是你写的代码有问题,没写好

<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <meta name="apple-mobile-web-app-status-bar-style" content="white">  
        <meta name="HandheldFriendly" content="true"/>  
        <meta name="MobileOptimized" content="320"/>  
 <style type="text/css">  
 *{ margin: 0px; padding: 0px;}  
.K_A_1{width:490px;height:40px;margin: 15px 0;overflow: hidden;}  
.K_A_1 span{width: 60px;height:28px;display: inline-block;text-align: right;font-size: 14px;line-height: 30px;margin-right: 15px;float: left;}  
#K_A_3{border: solid 1px #c9c9c9; overflow: hidden; width:250px; }  
#K_A_3_1{width: 164px;height: 28px;float: left;}  
#K_A_3_1 input {width: 155px;height: 28px; border:0;outline:none;}  
 </style>  
</head>  
<body>  
<div class="K_A_1">  
<span>手机号</span>  
<div id="K_A_3"><span>+68</span>  
<div id="K_A_3_1">  
<input type="text" placeholder="输入手机号码" />  
</div>  
</div>  
</div>  

</body>  

</html>
  • 蕾紫喵 (作者)

    非常感谢你!我看了你的代码有几个不知道什么意思!不过我已经解决了!在#K_A_3_1 input {width: 155px;height: 28px;padding: 0 7px 0 0;border: 0;}里面加上display: block;就能正常显示了!关于overflow: hidden;outline:none;我会去其他网站上学习的!

    2017-10-03 18:54

该问题目前已经被锁定, 无法添加新回复