Using jQuery mobile, I am trying to put a switch and a button in the same line, however it is not working and both elements are in separate lines:
Run: http://jsfiddle.net/cHqsJ/
Code:
<div data-role="fieldcontain">
<label for="switch">Privacy:</label>
<select name="switch" id="switch" data-role="slider">
<option value="0">Private</option>
<option value="1">Public</option>
</select>
<a href="#switchinfo" data-role="button" data-icon="info" data-iconpos="notext" data-rel="dialog">Switch Info</a>
</div>
What do I need to fix?
Use Three-column grids
. DEMO http://jsfiddle.net/yeyene/Rdfxs/17/
<div data-role="fieldcontain">
<div class="ui-grid-b">
<div class="ui-block-a"><label for="switch">Privacy:</label></div>
<div class="ui-block-b">
<select name="switch" id="switch" data-role="slider">
<option value="0">Private</option>
<option value="1">Public</option>
</select>
</div>
<div class="ui-block-c">
<a href="#switchinfo" data-role="button" data-icon="info" data-iconpos="notext" data-rel="dialog">Switch Info</a>
</div>
</div><!-- /grid-b -->
</div>
*There is also data-inline="true"
but the label would break another line.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.