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

Question

我正在嘗試使用jQuery mobile創建表單，並且我極力嘗試將兩個字段並排放置，以便他們可以在一行上選擇日期和時間。 到目前為止，我還沒有看到有人將整個表格分成兩列來實現。 同樣，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，會有一些重大更改。

必需的JSFiddle

編輯：我找出丟失的<hr> ，這是因為封閉的div需要data-role =“ fieldcontain”。 希望對<fieldset> vs role=fieldcontain vs .ui-field-contain vs <controlgroup> role=fieldcontain <fieldset>有一個很好的解釋

Answer 1

您需要添加float屬性，並清除“ none”到“ data-role：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>

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

Answer 2

使網格成為外部容器，然后不要混合網格單元格div和字段包含：

<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