jquerymobile下label和input输入框小屏幕不在同一行显示

来源：互联网发布：路边停车收费软件编辑：程序博客网时间：2024/04/30 16:48

这几天在学jqm，遇到这问题百度了好久，google到了国外的技术论坛都找不到合适的答案，有的人说是改自定义css样式 @media (max-width: 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>

0 0