<html>
<head>
<link rel="stylesheet" href="https://libs.baidu.com/jquerymobile/1.4.2/jquery.mobile.min.css">
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="https://libs.baidu.com/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<form method="post" action="demoform.asp">
<div data-role="fieldcontain">
<label for="lname">姓:</label>
<input type="text" name="lname" id="lname">
<label for="fname">名:</label>
<input type="text" name="fname" id="fname">
</div>
<input type="submit" data-inline="true" value="提交">
</form>
<p>fieldcontain 属性基于页面宽度来设置 label 和表单控件的样式。当页面宽度大于 480px 时,它会自动将 label 与表单控件放置于同一行。当小于 480px 时,label 会被放置于表单元素之上。</p>
<p>请尝试调整窗口的尺寸来查看效果。</p>
</div>
</div>
</body>
</html>