我是使用 jQuery 移动表单和 CSS 的新手。我已经构建了一个包含在 div 中的 jQuery Mobile 表单,我希望能够调整表单元素的位置,但到目前为止还没有任何运气。下面我尝试使用 CSS 将“提交”按钮与容器底部对齐,但未成功。任何人都可以提出一个好的方法来做到这一点吗?
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<style type="text/css">
#submitButton {
position: absolute;
bottom: 0%;
width: 50px;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<div id="lr" style="height: 500px;">
<form action="forms-sample-response.php" method="get" style="background-color:green; height: 100%;">
<label for="select-choice-0" class="select">Select Label:</label>
<select name="select-choice-0" id="select-choice-0">
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
<option value="item3">Item 3</option>
<option value="item4">Item 4</option>
</select>
<div id="preview"></div>
<button type="button" data-theme="a"
name="Choose" value="submit-value">Choose</button>
<label for="textarea">Text Area Label:</label>
<textarea name="textarea" id="textarea-a"></textarea>
<button id="submitButton" class="ui-btn-top" type="button"
data-theme="a" name="Publish" value="Upload">Submit</button>
</div>
</form>
</div>
</div>
</div>
</body>