因此，我将 jQuery Mobile 用于我的 Web 应用程序，并将 ui-field-contain 和 ui-grid-a 用作我的内容的容器 div .
但是，由于这个原因，其中包含的所有元素似乎都设置为屏幕的整个宽度，并且每个元素都占据了页面上的整行(甚至是 span 元素)。
我已经能够使用 CSS 调整宽度大小，但是，我想将这些元素中的一些放在一起，但我不知道如何实现它，因为它不像我在间隔它们使用 br 标签。
这是我的一些代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--CSS Stylesheets-->
<link rel="stylesheet" type="text/css" href="includes/css/style.css">
<!--jQuery Mobile Stylesheets-->
<link rel="stylesheet" type="text/css" href="includes/jQueryMobile/jquery.mobile-1.4.5.min.css">
<!--jQuery Library-->
<script src="includes/jQuery/jquery-1.11.3.min.js"></script>
<!--jQuery Mobile Library-->
<script src="includes/jQueryMobile/jquery.mobile-1.4.5.min.js"></script>
<!--jQuery Functions-->
<script src="includes/js/functions.js"></script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>
Create Survey
</h1>
</div>
<div id="main" data-role="main" class="ui-content">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div class="ui-field-contain">
<div class="ui-grid-a">
<label for="addQ" class="ui-hidden-accessible">Add Question</label>
<input type="button" value="Add Question" id="addQ" class="smallerBtns">
<!--Transportation Div-->
<div id="container">
</div>
<br>
<label for="submitSurvey" class="ui-hidden-accessible">Submit Survey</label>
<input type="submit" value="Submit Survey" id="submitSurvey">
</div>
</div>
</form>
</div>
<div data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="createSurvey.php">Create Survey</a></li>
<li><a href="takeSurvey.php">Take Survey</a></li>
</ul>
</nav>
</div>
</div>
</body>
</html>
这是我通过 javascript 附加到容器 div 中的一些内容:
//Question Type Visibility
$(document).bind("pageinit",function(){
$("#container").empty();
//Reset qCount
qCount = 0;
//jquery Add Question Event
$(document).undelegate('#addQ', 'click').delegate('#addQ','click', function() {
//Increment question counter
qCount++;
$('\
<div id="newQ' + qCount + '">\
<span id="num' + qCount + '" class="nums">' + qCount + '.</span>\
\
<!--Question Title-->\
<label id="qTitleLabel' + qCount + '" for="qTitle" class="ui-hidden-accessible">\
Question Title:\
</label>\
<input type="text" name="qTitle' + qCount + '" id="qTitle' + qCount + '" placeholder="Question Title">\
\
<!--Question Type-->\
<label id="qTypeLabel' + qCount + '" for="addQType' + qCount + '" class="ui-hidden-accessible">\
Question Type:\
</label>\
<select name="addQType' + qCount + '" id="addQType' + qCount + '" class="' + qCount + '">\
<option selected disabled hidden value=\'\'>Pick a Type</option>\
<option value="smallTextDiv">Small Text</option>\
<option value="tORfDiv">True or False?</option>\
<option value="dropdownDiv">Dropdown</option>\
<option value="numDiv">Number</option>\
<option value="radDiv">Radio Buttons</option>\
<option value="largeTextDiv">Large Text</option>\
<option value="checkboxDiv">Checkboxes</option>\
</select>\
\
<!--Small Text-->\
<div id="smallTextDiv' + qCount + '" class="types' + qCount + '">\
<label id="addQSmallTextLabel' + qCount + '" for="addQSmallText' + qCount + '">\
Preview:\
</label>\
<input type="text" name="addQSmallText' + qCount + '" id="addQSmallText' + qCount + '">\
</div>
').hide().appendTo("#container").fadeIn(1000).enhanceWithin();
}) //end add question
}) //end document ready function
最佳答案
此页面应该可以帮助您处理网格... http://demos.jquerymobile.com/1.4.1/grids/
如果您需要内联(并排)表单元素，您还应该能够使用网格来使用嵌套网格完成布局
<div class="ui-grid-a">
<div class="ui-grid-a"><div>
<div class="ui-grid-b"><div>
</div>
看到这个 fiddle ... http://jsfiddle.net/j5zbB/
关于javascript - 如何在 jQuery Mobile 中构造元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31480823/