要素を水平に整列する、jquery mobile

Question

jqueryモバイルまたは関連するモバイルUIフレームワークで多くの経験をしていないので、要素を水平に整列することは難しいです。

テキストフィールドと選択タグを水平に整列させたいと思います。インラインで表示されるようにします。

Iはデータ型= "水平"とデータインライン= "true" を試みました。彼らは働いていません。

ここで私は、

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

コメント/提案を使用していたコードですか？

Answer 1

トムの答えが役に立ちました。そのディイントは必要に応じて正確に動作します

私は必要な出力を得るために以下を使用しました。

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

一つは（hereを参照してください）。このため

をレイアウトグリッドを使用することはできますが、レイアウトグリッドは、少なくとも私の場合は、必要なアラインメントを取得されなかった、正確な結果が得られない場合があります。

Some good fiddlesが有用であった。

Answer 2

Text inputs & Textareasをご覧ください。

それは自分自身でdata-inlineをサポートしていませんが、あなたの代わりにdata-role=fieldcontainを使用することができます。

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

を限り、私はあなたが複数の入力を置くことができない見ることができるように隣同士にのみjQueryの機動を使用して...

Answer 3

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

あなたはstyle="margin-left=30px;margin-right=30px;"

Answer 4

を使用するだけで、左右の調整を操作したい場合は...私はまだjQueryのモバイルフレームワークを自分で勉強していますので、私はちょうどその時、あなた、それは痛みを知っています何かをやり遂げる必要がありますが、フレームワーク内に既に組み込まれているものを使用しようとする必要があります。特に、モバイルフレンドリーなアプリケーションを構築する場合は特にそうです。あなた自身に好意を持ち、それを学ぶのに必要な時間を取る。

また、別のチップ。要素のサイジングにpx値を使用しないようにする必要があります。これは、モバイルデバイスでは一般的に拡張されないため、em値はクロスプラットフォームでの使用に最適です。

「インライン」のテキスト入力とjqmでボックスを選択するのに、次のコードに類似したものを使用しました。スタイルが異なるようにするには、個々のui-block要素の後ろにテーマスウォッチ文字を追加して、ui-block-bやui-block-cなどのように見えるようにします。これはすべて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 -->