如何在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> 

编辑：对不起，我的小提琴得到搞砸了。现在应该修复。