问题
I've created this elements form:
<div class = "ui-grid-a">
<div class= "ui-block-a">
<div data-role="fieldcontain" class = "ui-hide-label">
<label for="birth-place">Birth Place</label>
<input type="text" name="birth-place" id="birth_place" value="" placeholder="Birth Place" />
</div>
</div>
<div class = "ui-block-b">
<div data-role = "fieldcontain" class="ui-hide-label">
<label for="province">Province</label>
<input type="text" name="province" id="province" value="" placeholder="PR" />
</div>
</div>
</div>
and I want to align the element province to the right. How can I do that?
回答1:
Try this:
<span style="float:right"><label for="province">Province</label></span>
(of course you can put this also in a external css file)
回答2:
Just do the following... Apply this custom CSS to your code...
label[for="province"] { text-align:right; }
If it doesn't run they supply the label with a class name and do the following..
label.className { text-align:right; }
回答3:
Apply a style of text-align:right;to the input field directly, as in this fiddle.
http://jsfiddle.net/den232/Fw2yA/
Good luck!
.floatright {
text-align:right;
}
<div data-role="page" class="type-home">
<div data-role="content">
<div class = "ui-grid-a">
<div class= "ui-block-a">
<div data-role="fieldcontain" class = "ui-hide-label">
<label for="birth-place">Birth Place</label>
<input type="text" name="birth-place" id="birth_place" value="" placeholder="Birth Place" class='floatright' />
</div>
</div>
<div class = "ui-block-b">
<div data-role = "fieldcontain" class="ui-hide-label">
<label for="province">Province</label>
<input type="text" name="province" id="province" value="" placeholder="PR" />
</div>
</div>
</div>
</div>
</div>
来源:https://stackoverflow.com/questions/9184352/align-to-right-an-element-in-jquery-mobile