JQuery Mobile 中的水平布局

Posted 2023-05-09

【中文标题】JQuery Mobile 中的水平布局

【英文标题】：Horizontal Layout in JQuery Mobile

【发布时间】：2013-03-20 05:45:32

【问题描述】：

我正在开发一个 jquery 移动应用程序。在我的应用程序中，我有一些想要水平布局的表单数据。目前，我有以下内容：

<div data-role="content">        
  <ul data-role="listview"> 
    <li data-role="list-divider">Information Here</li>
  </ul><br />

  <ul id="myList" data-role="listview" data-inset="true" data-theme="d" data-dividertheme="d">
    <li data-role="list-divider">Choice</li>
    <li data-role="fieldcontain">
      <div class="ui-grid-c">
        <div class="ui-block-a" style="font-weight:normal;">From</div>
        <div class="ui-block-b">
          <select name="selector1" id="selector"1 data-native-menu="false">
            <option value="__">Please Choose</option>                
          </select>                    
        </div>
        <div class="ui-block-c" style="font-weight:normal;">To</div>                
        <div class="ui-block-d">
          <select name="selector2" id="selector2" data-native-menu="false">
            <option value="__">Please Choose</option>                
          </select>                    
        </div>
      </div>
    </li>
  </ul>
</div>

我的挑战是，网格方法均匀地划分了 4 列。实际上，我只想将元素水平放置。我不需要所有东西都均匀分布。但是，我不确定如何执行此操作。

如何横向布局内容？

【问题讨论】：

w3schools.com/css/css_align.asp

【参考方案1】：

类似这样的：http://jsfiddle.net/Gajotres/K9duV/

<ul id="myList" data-role="listview" data-inset="true" data-theme="d" data-dividertheme="d">
<li data-role="list-divider">Choice</li>
<li>
  <div class="ui-grid-a">
    <div class="ui-block-a" style="font-weight:normal;">
        <div data-role="fieldcontain" id="left-select">
            <label for="selector1">From:</label>            
            <select name="selector1" id="selector1" data-native-menu="false">
                <option value="__">Please Choose</option>                
            </select>
        </div>   
    </div>
    <div class="ui-block-b">
        <div data-role="fieldcontain" id="right-select">
            <label for="selector2">To:</label>               
            <select name="selector2" id="selector2" data-native-menu="false">
                <option value="__">Please Choose</option>                
            </select>                                
        <div>    
    </div>
  </div>
</li>
</ul> 

【讨论】：

这不是将所有内容均匀地分成两列吗？本质上，我想要一列，其中所有内容都是水平布局的。

如此接近！我一直在玩它，但有一个小问题。如果其中一个标签较大，则图像“From：”类似于“Begin From：”文本换行。此外，选择下拉菜单中的“请选择”文本被截断。我添加了“空白：nowrap”。这有帮助。但是，它并没有解决文本被切断的事实。有任何想法吗？非常感谢您的帮助。