Elemente horizontal ausrichten, jquery mobile

Question

Ich habe nicht viel Erfahrung auf Jquery Mobile oder verwandten mobilen UI-Frameworks, ich finde es schwierig, Elemente horizontal auszurichten.

Ich möchte Textfeld horizontal ausrichten und markieren. damit sie inline erscheinen.

Ich versuchte Daten-type = "horizontal" und Daten-inline = "true". aber sie arbeiten nicht.

Hier ist der Code ich verwende,

<div data-role="controlgroup" data-type="horizontal"> 
     <label for="cs" class="fieldLabel">option 1: </label> 
     <select name="cs[param_string_1]" id="cs[param_string_1]" data-inline="true"> 
      <option>options</option> 
     </select> 
     <input type="text" data-inline="true" style="width:100px" id="cs[param_num_1]" name="cs[param_num_1]" /> 
</div> 

Kommentare/Anregungen?

Answer 1

Toms Antwort war nützlich. aber das dint funktioniert genau nach dem Bedarf

Ich habe folgende verwendet, um die erforderliche Ausgabe zu erhalten.

<div data-role="controlgroup" data-type="horizontal"> 
     <table> 
     <tr> 
      <td width="30%"> 
      <select name="cs_abc" class="fieldLabel" style="width: 100%" data-inline="true" id="cs[abc]"> 
       <option>...</option>   
      </select> 
      </td> 
      <td width="70%"> 
       <input type="text" id="cs_xyz" style="width:160px" data-theme="d" name="cs[xyz]" /> 
      </td> 
      </tr> 
     </table> 
    </div>   

Man kann Layout-Raster für diese (siehe here)

Aber Layout-Raster nicht geben genaue Ergebnisse, zumindest in meinem Fall verwende ich nicht die nötige Ausrichtung bekommen.

Some good fiddles waren nützlich.

Answer 2

Werfen Sie einen Blick auf Text inputs & Textareas.

Es ist nicht data-inline auf seine eigene nicht unterstützt, aber Sie data-role=fieldcontain stattdessen verwenden können:

<div data-role="fieldcontain"> 
    <label for="name">Text Input:</label> 
    <input type="text" name="name" id="name" value="" /> 
</div> 

Soweit ich Sie sehen können nicht mehrere Eingänge nebeneinander nur mit jQuery Moblie setzen können ..

Answer 3

<div href="#" data-role="button" style="margin:30px;">Adjust</div> 

wenn Sie gerade nach rechts und links Anpassungen verwenden manipulieren wollen style="margin-left=30px;margin-right=30px;"

Answer 4

... Ich bin immer noch das jQuery Mobile Framework selbst lernen, damit ich weiß, ist es ein Schmerz, wenn Sie gerade Sie müssen etwas tun, aber Sie sollten wirklich versuchen, das zu verwenden, was bereits im Framework enthalten ist, insbesondere wenn Sie mobile Apps entwickeln möchten. Tun Sie sich einen Gefallen und nehmen Sie sich die Zeit, um es zu lernen.

Auch ein weiterer Tipp; Sie müssen keine px-Werte für Dimensionierungselemente verwenden, da diese auf mobilen Geräten normalerweise nicht gut skaliert werden. em-Werte eignen sich am besten für die plattformübergreifende Verwendung.

Ich habe erfolgreich etwas ähnlich dem folgenden Code zu "Inline" Texteingabe und wählen Sie Boxen mit jqm. Wenn Sie möchten, dass die Stile unterschiedlich sind, können Sie den Muster-Musterbuchstaben nach dem einzelnen ui-Block-Element einfügen, sodass er etwa wie ui-block-b oder ui-block-c aussieht. Dies ist hier alles dokumentiert: http://demos.jquerymobile.com/1.0rc1/docs/content/content-grids.html

<div class="ui-grid-a"> 
    <div class="ui-block"> 
     <label for="cs[ps_1]" class="fieldLabel ui-hidden-accessible">option 1: </label> 
     <select name="cs[ps_1]" id="cs[ps_1]" data-mini="true"> 
     <option>options</option> 
     </select> 
    </div> 
    <div class="ui-block"> 
     <input type="text" style="width:10em;" id="cs[pn_1]" name="cs[pn_1]" /> 
    </div> 
    </div><!-- /grid-a -->