jquerymobile下label和input输入框小屏幕不在同一行显示
2014-04-19 17:10
369 查看
这几天在学jqm，遇到这问题百度了好久，google到了国外的技术论坛都找不到合适的答案，有的人说是改自定义css样式 @media (max-width:
480px) ，但是我试了却没用，还有的说是改label的宽度，我改了没用。最后偶然发现去掉
就可以了。去掉之前的效果图
去掉之后的效果图
但是我还是不知道原理是什么，有知道的大神不只能否解释下？
代码如下： <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="CSS/jquery.mobile-1.3.2.min.css">
<script type="text/javascript" src="JS/jquery.js">
</script>
<script type="text/javascript" src="JS/jquery.mobile-1.3.2.min.js">
</script>
<script>
$(document).ready(function() {
//$(".ui-radio").css("width","50%");
$(":submit").click(function(){
var a;
a=$("#count").val();
var b=a.match(/\w+/g);
if(b==null){
alert("输错了！");
return false;}
})
});
</script>
</head>
<body>
<div data-role="page" data-fullscreen="true">
<div data-role="header" style="height:10%">
<div style="text-align:center;height:100%"><span>Register</span></div>
</div>
<div data-role="content">
<form action="#" method="post">
<div data-role="fieldcontain">
<label for="count"><b>学号：</b></label>
<input type="text" name="count" id="count" data-di/>
</div>
<div data-role="fieldcontain">
<label for="pwd">密码:</label>
<input type="password" name="pwd" id="pwd"/>
</div>
<div data-role="fieldcontain">
<label for="nickname"><b>昵称：</b></label>
<input type="text" name="nickname" id="nickname"/>
</div>
<fieldset data-role="controlgroup">
<legend><b>恋爱状态：</b></legend>
<label for="single">单身</label>
<input type="radio" name="lstate" id="single" value="single" data-theme="b">
<label for="loving">热恋ing</label>
<input type="radio" name="lstate" id="loving" value="loving" data-theme="b">
</fieldset>
<div style="margin:auto;width:60%">
<div style="float:left;width:40%"><input type="submit" value="提交" data-theme="b" /></div>
<div style="float:right;width:40%"><input type="reset" value="重写" data-theme="b" /></div>
</div>
</form>
</div>
<div data-role="footer" data-position="fixed" data-transition="slideup">
<div style="text-align:center;height:40%">copyright by 飘雪工作室</div>
</div>
</div>
</body>
</html>
480px) ，但是我试了却没用，还有的说是改label的宽度，我改了没用。最后偶然发现去掉
<div data-role="page" data-fullscreen="true">中的
data-fullscreen="true"
就可以了。去掉之前的效果图
去掉之后的效果图
但是我还是不知道原理是什么，有知道的大神不只能否解释下？
代码如下： <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="CSS/jquery.mobile-1.3.2.min.css">
<script type="text/javascript" src="JS/jquery.js">
</script>
<script type="text/javascript" src="JS/jquery.mobile-1.3.2.min.js">
</script>
<script>
$(document).ready(function() {
//$(".ui-radio").css("width","50%");
$(":submit").click(function(){
var a;
a=$("#count").val();
var b=a.match(/\w+/g);
if(b==null){
alert("输错了！");
return false;}
})
});
</script>
</head>
<body>
<div data-role="page" data-fullscreen="true">
<div data-role="header" style="height:10%">
<div style="text-align:center;height:100%"><span>Register</span></div>
</div>
<div data-role="content">
<form action="#" method="post">
<div data-role="fieldcontain">
<label for="count"><b>学号：</b></label>
<input type="text" name="count" id="count" data-di/>
</div>
<div data-role="fieldcontain">
<label for="pwd">密码:</label>
<input type="password" name="pwd" id="pwd"/>
</div>
<div data-role="fieldcontain">
<label for="nickname"><b>昵称：</b></label>
<input type="text" name="nickname" id="nickname"/>
</div>
<fieldset data-role="controlgroup">
<legend><b>恋爱状态：</b></legend>
<label for="single">单身</label>
<input type="radio" name="lstate" id="single" value="single" data-theme="b">
<label for="loving">热恋ing</label>
<input type="radio" name="lstate" id="loving" value="loving" data-theme="b">
</fieldset>
<div style="margin:auto;width:60%">
<div style="float:left;width:40%"><input type="submit" value="提交" data-theme="b" /></div>
<div style="float:right;width:40%"><input type="reset" value="重写" data-theme="b" /></div>
</div>
</form>
</div>
<div data-role="footer" data-position="fixed" data-transition="slideup">
<div style="text-align:center;height:40%">copyright by 飘雪工作室</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- IE8开发人员工具教程（二）
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets
- javascript asp教程第十二课---session对象
- javascript asp教程创建数据库连接
- javascript asp教程错误处理
- javascript asp教程第十课--global asa
- javascript asp教程第十一课--Application 对象
- javascript 获取特定的 CSS属性值
- JAVASCRIPT IE 与 FF 中兼容写法记录
- javascript横排竖排标准选项卡效果代码
- javascript prototype，executing，context，closure
- javascript实现的树型下拉框改进版
- 比较简洁的JavaScript 实时显示时间的脚本 修正版