Question

我正在尝试使用JQuery Mobile显示标签和输入列表，以便结果看起来像iPhone上的设置，例如标签左对齐，输入在同一行右对齐。我设法做到这一点的唯一方法是使用表格，我认为这是不好的做法？

没有表格的CSS会是什么？

   <ul data-role="listview" data-dividertheme="e">
                <li data-role="list-divider">Seamless List (margin-less)</li>
                <li>
                    <table style="width:100% ">
                        <tr>
                            <td style="width: 50%">
                                Foo1
                            </td>
                            <td style="width: 50%">

                                <input type="number" value="20000" style="text-align: right" 
                                id="Foo1Input" />

                            </td>
                        </tr>
                    </table>
                </li>

Answer 1

我知道这篇文章已经过时了，但对于未来的人来说，请看看他们的网格 http://jquerymobile.com/test/docs/content/content-grids.html

Answer 2

您可以尝试这样的事情：http://jsfiddle.net/7Layw/1/。

<强> HTML

<div id="listWrapper">
    <div class="leftItem">
        Foo1
    </div>
    <div class="rightItem">
        <input type="number" value="20000" style="text-align: right" 
        id="Foo1Input" />
    </div>
    <div class="leftItem">
        Foo2
    </div>
    <div class="rightItem">
        <input type="number" value="20000" style="text-align: right" 
        id="Foo1Input" />
    </div>
</div>

<强> CSS

.leftItem {
    clear: both;
    float: left;
    width: 50%;
}

.rightItem {
    float: left;
    width: 50%
}

使用此方法，您只需将左边的每个项目包含在div类中，类为leftItem，右边的每个项目都包含一个rightItem类。

我希望有所帮助！

Answer 3

<div data-role="fieldcontain">
    <label for="customField">Hello</label>
    <input type="text" name="customField" id="customField" value=""  />
</div>

使用fieldcontain

使用jquery移动CSS的一行标签/输入字段

3 个答案: