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

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: //jsfiddle.net/7Layw/1/。

超文本标记语言

<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 类中。

我希望这有帮助！