如何在 jQuery mobile 中并排显示两个文本输入？答案

【问题标题】：How to display two text inputs side by side in jQuery mobile?如何在 jQuery mobile 中并排显示两个文本输入？
【发布时间】：2015-10-21 20:45:01
【问题描述】：

我正在尝试使用 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 会有一些重大变化。

Requisite JSFiddle

编辑：我发现了缺少的<hr>，这是因为封闭的 div 需要 data-role="fieldcontain"。希望<fieldset> vs role=fieldcontain vs .ui-field-contain vs <controlgroup>有一个很好的解释

【问题讨论】：

标签： javascript jquery html css jquery-mobile

【解决方案1】：

您需要在“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>

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

【讨论】：

有效！谢谢，虽然使用内联 css 感觉有点脏。

【解决方案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

【讨论】：