Une étiquette de ligne/champ de saisie à l'aide de jquery mobile CSS

J'essaie d'afficher une liste des étiquettes et des entrées à l'aide de JQuery Mobile, de sorte que les résultats ressembler à quelque chose comme les réglages de l'iPhone, de l'e.g de l'étiquette est aligné à gauche, et l'entrée est aligné à droite sur la même ligne. La seule façon que j'ai réussi à faire c'est à l'aide de tables, je crois que c'est une mauvaise pratique?

Quel serait l'égale CSS sans les tables?

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

OriginalL'auteur Kye | 2011-02-24

  1. 2

    Vous pouvez essayer quelque chose comme ceci: 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%
}

    Avec cette méthode, tout ce que vous avez à faire est d'envelopper chaque élément sur la gauche dans un div avec la classe leftItem et chaque élément sur la droite avec une classe de rightItem.

    J'espère que ça aide!

    OriginalL'auteur Kevin Gurney

  2. 4

    Je sais que ce post est vieux, mais pour les gens à l'avenir, prendre un coup d'oeil à leurs réseaux
    http://jquerymobile.com/test/docs/content/content-grids.html

    Bienvenue à Débordement de Pile! Tandis que ceci peut théoriquement répondre à la question, il serait préférable pour inclure l'essentiel des éléments de réponse ici, et de fournir le lien de référence. Sinon, les gens peuvent en bas de vote ou le drapeau de cette réponse.
    Les grilles ne fonctionnera pas. Il n'y a pas de rembourrage ou des marges dans une grille.

    OriginalL'auteur the138crew

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

    utilisation fieldcontain

    Correct pour les versions antérieures (lorsque la question a été posée), mais demos.jquerymobile.com/1.4.2/forms-field-contain mentionne cela est déprécié depuis la 1.4; jquerymobile.com/upgrade-guide/1.4 dit d'ajouter la classe ui-champ-contiennent de la place.
    Par la route: cela ne fonctionne pas dans les popups (voir la discussion ici: github.com/jquery/jquery-mobile/issues/5946).

    OriginalL'auteur Grumpy