javascript - 如何在 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 会有一些重大变化。

Requisite JSFiddle

编辑:我找到了丢失的 <hr> ，这是因为封闭的 div 需要 data-role="fieldcontain"。希望对 <fieldset> 有一个很好的解释对比role=fieldcontain对比.ui-field-contain对比<controlgroup>

Answer 1

您需要添加 float 属性，并清除:无到“data-role:fieldcontain”元素。这是一个快速而肮脏的例子。我建议为两者之间的任何公共(public)类使用额外的 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>

编辑:抱歉，我的 fiddle 搞砸了。现在应该修好了。