如何在jQuery Mobile中並排顯示兩個文本輸入？

Question

我想用jQuery手機創建一個表單，並且我非常努力地將兩個字段並排排列，以便他們可以在一行上選擇日期和時間。到目前爲止，我還沒有看到任何人沒有將整個表格分成兩列來實現這一點。此外jQuery Mobile的投入在小屏幕上的字段集之間的一個很好的<hr>，但似乎並沒有在

<div class="ui-field-contain"> 
    <fieldset class="ui-grid-a"> 
     <div data-role="fieldcontain" class="ui-block-a"> 
      <label for="date">Start date:</label> 
      <input type="date" name="date" id="date" value=""> 
     </div> 
     <div data-role="fieldcontain" class="ui-block-b"> 
      <label for="time">Start time:</label> 
      <input type="time" name="time" id="time" value=""> 
     </div> 
    </fieldset> 
</div> 

這之後要做到這一點是我到目前爲止 - 我有很多額外的部件/這可能複製類同樣的事情 - 這些會干擾對方嗎？另外我使用的是JQuery Mobile 1.3，因爲這是我的應用程序的其餘部分構建的，因爲如果我導入v1.4，我聽說有一些突變。

Requisite JSFiddle

編輯：我想通了失蹤<hr>，這是因爲封閉DIV需要數據角色= 「fieldcontain」。希望能有一個很好的解釋上<fieldset> VS role=fieldcontain VS .ui-field-contain VS <controlgroup>

Answer 1

使電網外容器中，然後不要混合您的網格單元的div和fieldcontains：

<fieldset class="ui-grid-a sideByside"> 
    <div class="ui-block-a"> 
     <fieldset data-role="fieldcontain"> 
      <label for="date">Start date:</label> 
      <input type="date" name="date" id="date" value=""> 
     </fieldset> 
    </div> 
    <div class="ui-block-b"> 
     <fieldset data-role="fieldcontain"> 
      <label for="time">Start time:</label> 
      <input type="time" name="time" id="time" value=""> 
     </fieldset> 
    </div> 
</fieldset> 

您可以添加一些CSS來獲取單元格間距：

.sideByside .ui-block-a { 
    padding-right: 6px; 
} 
.sideByside .ui-block-b { 
    padding-left: 6px; 
} 

更新FIDDLE

Answer 2

您需要添加浮動性質，並明確：沒有對「數據的作用：fieldcontain」元素。這是一個快速而骯髒的例子。我會建議使用一個額外的CSS類的任何兩者之間的共同類：

https://jsfiddle.net/2xuqbL5e/

<div class="ui-field-contain"> 
    <fieldset class="ui-grid-a"> 
     <div data-role="fieldcontain" class="ui-block-a"><!-- Add float:left and clear:none --> 
      <label for="date">Start date:</label> 
      <input type="date" name="date" id="date" value=""> 
     </div> 
     <div data-role="fieldcontain" class="ui-block-b"><!-- Add float:right and clear:none --> 
      <label for="time">Start time:</label> 
      <input type="time" name="time" id="time" value=""> 
     </div> 
    </fieldset> 

編輯：對不起，我的小提琴得到搞砸了。現在應該修復。