水平對齊元素，jquery移動

我沒有太多的jQuery手機或相關的移動UI框架的經驗，我發現很難水平對齊元素。水平對齊元素，jquery移動

我想水平對齊文本字段並選擇標記。以便它們以內聯方式顯示。

我試圖數據類型= 「水平」和數據列直插= 「真」。但他們不工作。

下面是我使用的代碼，

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

的意見/建議？

來源

2012-04-10 hitesh israni

湯姆的回答很有用。但該功能完全按照需要工作

我使用以下來獲取所需的輸出。

<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很有用。

來源

2012-04-15 20:37:03

看看Text inputs & Textareas。

它不支持data-inline自身，但您可以使用data-role=fieldcontain代替：只使用jQuery的手機類

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

至於我可以看到你不能把多個輸入彼此相鄰..

來源

2012-04-10 18:29:37

可以使用佈局網格也可以使用表格。我用表格解決了我的問題。如果你想要，你可以更新你的答案。thnx – 2012-04-12 06:17:05

@mashit：佈局網格可能是一種可能性，但表格是錯誤的，因爲它們在語義上用於數據。你也可以使用風格的div來解決這個問題。 – 2012-04-12 09:38:11

可以舉例說明風格的div？ – 2012-04-12 10:39:13

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

，如果你想操作只左右的調整使用style="margin-left=30px;margin-right=30px;"

來源

2013-02-27 06:47:12 Nirus

...我仍然在學習jQuery Mobile框架自己，所以我知道這是一個痛苦，當你只是需要完成某些工作，但是您應該嘗試使用框架內已經構建的內容，特別是如果您要構建適用於移動設備的應用程序。幫你一個忙，花點時間學習它。

另外，另一個提示;您需要遠離使用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 -->

來源

2017-05-09 13:10:06 Obewan

水平對齊元素，jquery移動

回答

相關問題