Question

我想使用jquery mobile

并排处理（水平）两个输入

我试过这种方式，但似乎不起作用：

<div class="containerButtons ui-grid-a">
                <div data-role="fieldcontain" class="ui-block-a" style=" width: 50% !important;">
                    <label for="start">Start:</label> <input type="date" data-date-format="dd-mm-yy"
                        name="start" class="dataAControl" id="start" >
                </div>

                <div data-role="fieldcontain"  class="ui-block-b" style=" width: 50% !important;">
                    <label for="end">End:</label> <input type="date" 
                        name="end" class="dataAControl" id="end" >
                </div>
                    </div>

我使用这种方法并排排列2个按钮并且它可以正常工作，但是我无法将它们与输入对齐

Answer 1

您应该使用float:left -

＆＃13;

<div class="containerButtons ui-grid-a">
                <div data-role="fieldcontain" class="ui-block-a" style=" width: 50% !important;float:left">
                    <label for="start">Start:</label> <input type="date" data-date-format="dd-mm-yy"
                        name="start" class="dataAControl" id="start" >
                </div>

                <div data-role="fieldcontain"  class="ui-block-b" style=" width: 50% !important;float:left">
                    <label for="end">End:</label> <input type="date" 
                        name="end" class="dataAControl" id="end" >
                </div>
  <div style="clear:both;"></div>
                    </div>

＆＃13;

我希望它会对你有所帮助。

Answer 2

我认为div容器可能有padding，所以请尝试以下代码：

<div class="containerButtons ui-grid-a"
    style="padding:0">
    <div data-role="fieldcontain"
        class="ui-block-a"
        style=" width: 50% !important;float:left">
        <label for="start">Start:</label>
        <input type="date"
            data-date-format="dd-mm-yy"
            name="start"
            class="dataAControl" id="start">
    </div>

    <div data-role="fieldcontain"
        class="ui-block-b"
        style=" width: 50% !important;float:left">
        <label for="end">End:</label>
        <input type="date"
            name="end"
            class="dataAControl"
            id="end" >
    </div>

    <!-- don't forget clearing float -->
    <div style="clear:both;"></div>
</div>

Answer 3

我发现了问题，“内部”div datarole必须内容

<div class="containerButtons ui-grid-a">
                <div data-role="content" class="ui-block-a" style=" width: 50% !important;">
                    <label for="start">Start:</label> <input type="date" data-date-format="dd-mm-yy"
                        name="start" class="dataAControl" id="start" >
                </div>

                <div data-role="content"  class="ui-block-b" style=" width: 50% !important;">
                    <label for="end">End:</label> <input type="date" 
                        name="end" class="dataAControl" id="end" >
                </div>
                    </div>

Answer 4

使用float:left修改两个div，这是我需要覆盖它。

同样将输入发送到新行，这样可以更容易阅读/编辑。

<div class="containerButtons ui-grid-a">
    <div data-role="fieldcontain" class="ui-block-a" style="float:left; width: 50% !important;">
        <label for="start">Start:</label>
        <input type="date" data-date-format="dd-mm-yy" name="start" class="dataAControl" id="start" />
    </div>

    <div data-role="fieldcontain"  class="ui-block-b" style="float:left; width: 50% !important;">
        <label for="end">End:</label>
        <input type="date" name="end" class="dataAControl" id="end" />
    </div>
</div>

哦，小提琴.. http://jsfiddle.net/xfn244nb/1/

如果失败了，那对我测试的没有..你可以随时使用display:inline-block;，因为这一直是我的首选方法。例如Advantages of using display:inline-block vs float:left in CSS

Jquery移动并排输入

4 个答案: