在jquery mobile中右对齐一个元素

时间:2012-02-07 21:37:24

标签: jquery-mobile

我已经创建了这个元素形式:

<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>

我希望将元素province对齐到右边。我怎么能这样做?

3 个答案:

答案 0 :(得分:10)

试试这个: <span style="float:right"><label for="province">Province</label></span> (当然你也可以将它放在外部的css文件中)

答案 1 :(得分:1)

请执行以下操作... 将此自定义CSS应用于您的代码...

label[for="province"] { text-align:right; }

如果它没有运行,它们会为标签提供类名并执行以下操作。

label.className { text-align:right; }

答案 2 :(得分:0)

将一种text-align:right;样式应用于输入字段,就像在这个小提琴中一样。

http://jsfiddle.net/den232/Fw2yA/

祝你好运!

.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>