Eine Zeile label/input-Feld mit jquery mobile CSS

Ich versuche anzeigen, um eine Liste der labels und inputs mit Hilfe von JQuery Mobile, so dass die Ergebnisse so Aussehen, wie die Einstellungen auf dem iPhone, e.g-label ist Links ausgerichtet, und der Eingang ist Rechtsbündig in der gleichen Zeile. Der einzige Weg, ich habe es geschafft, dies zu tun ist durch die Verwendung von Tabellen, die ich glaube, ist eine schlechte Praxis?

Was wäre die von CSS ohne Tabellen?

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

InformationsquelleAutor Kye | 2011-02-24

  1. 2

    Könnten Sie versuchen, so etwas wie dieses: 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%
}

    Mit dieser Methode alles, was Sie würde tun müssen ist, wickeln Sie jedes Element auf der linken Seite in einem div mit der Klasse leftItem und jedes Element auf der rechten die mit einer Klasse von rightItem.

    Ich hoffe, das hilft!

    InformationsquelleAutor Kevin Gurney

  2. 4

    Ich weiß, dieser Beitrag ist alt, aber für Leute, die in die Zukunft werfen Sie einen Blick auf Ihre Netze
    http://jquerymobile.com/test/docs/content/content-grids.html

    Herzlich willkommen auf Stack Overflow! Während dies theoretisch eine Antwort auf die Frage, vorzuziehen, umfassen die wesentlichen Teile der Antwort hier, und geben Sie den link zur Referenz. Ansonsten, Leute nach unten Abstimmung oder Flagge diese Antwort.
    Raster wird nicht funktionieren. Es gibt keine Polsterung oder Ränder in einem raster.

    InformationsquelleAutor the138crew

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

    verwenden fieldcontain

    Richtige für frühere Versionen (wenn die Frage gestellt wurde), aber demos.jquerymobile.com/1.4.2/forms-field-contain erwähnt, das ist veraltet, seit 1.4; jquerymobile.com/upgrade-guide/1.4 sagt, dass für Sie die Klasse ui-Bereich-enthalten statt.
    Übrigens: dies funktioniert nicht in popups obwohl (siehe Diskussion hier: github.com/jquery/jquery-mobile/issues/5946).

    InformationsquelleAutor Grumpy

Schreibe einen Kommentar