在一行上对齐HTML选择元素

Question

我正在使用HTML / CSS / JavaScript开发移动应用程序。 我有两个选择选项（下拉菜单），一个用于日期数，另一个用于年数。 我希望能够在一行中看到这些选择选项，但无论我做什么，我都会在一行中获得一个下拉菜单（日期数），在下一行我会看到下拉菜单的年数。 您可以在下面看到我的代码

<div data-role="controlgroup" data-type = "horizontal" >

        <label for="select-choice-1" >Choose Expiry Date</label>
            <select name="select-choice-1" id="select-choice-1" data-inline = "true" style = "float: left">
                <option value="1">01</option>
                <option value="2">02</option>
                <option value="3">03</option>
                <option value="4">04</option> 
                <option value="5">05</option> 
                <option value="6">06</option> 
                <option value="7">07</option> 
                <option value="8">08</option> 
                <option value="9">09</option> 
                <option value="10">10</option> 
                <option value="11">11</option> 
                <option value="12">12</option> 
                <option value="13">13</option> 
                <option value="14">14</option> 
                <option value="15">15</option> 
                <option value="16">16</option> 
                <option value="17">17</option> 
                <option value="18">18</option> 
                <option value="19">19</option> 
                <option value="20">20</option> 
                <option value="21">21</option> 
                <option value="22">22</option> 
                <option value="23">23</option> 
                <option value="24">24</option> 
                <option value="25">25</option> 
                <option value="26">26</option> 
                <option value="27">27</option> 
                <option value="28">28</option> 
                <option value="29">29</option> 
                <option value="30">30</option> 
                <option value="31">31</option> 
            </select>

            <select name="select-year" id="select-yaer"  data-inline = "true" style = "float: right"/>
                <option value="2011">2011</option>
                <option value="2012">2012</option>
                <option value="2013">2013</option>
                <option value="2014">2014</option> 
                <option value="2015">2015</option> 
                <option value="2016">2016</option> 
                <option value="2017">2017</option> 
                <option value="2018">2018</option> 
                <option value="2019">2019</option> 
                <option value="2020">2020</option> 
                <option value="2021">2021</option> 
                <option value="2022">2022</option> 
                <option value="2023">2023</option> 
                <option value="2024">2024</option> 
                <option value="2025">2025</option> 
                <option value="2026">2026</option> 
                <option value="2027">2027</option> 
                <option value="2028">2028</option> 
                <option value="2029">2029</option> 
                <option value="2030">2030</option> 

            </select><br />

        </div>

更新：我正在使用jQuery移动框架在Android浏览器上测试这些代码。

Answer 1

它是导致您出现问题的ui-select类的宽度，将宽度设置为auto应该可以解决问题。 jQM为页面上的外观添加了大量额外标记，以便在多个设备上保持一致。 如果您在浏览器（例如Chrome或FireFox）中查看页面源，则可以看到额外的元素。 在您的情况下，您需要修改ui-select类，因为它的默认宽度为60％。

实例：

• http://jsfiddle.net/phillpafford/trdYP/47/

JS：

$('#select-choice-1').parent().parent().css('width','auto');

HTML：

<div data-role="page" id="home"> 
    <div data-role="content">
        <div data-role="controlgroup" data-type="horizontal" data-inline="true">

            <label for="select-choice-1" data-inline="true">Choose Expiry Date</label>
                <select name="select-choice-1" id="select-choice-1" data-inline="true">
                    <option value="1">01</option>
                    <option value="2">02</option>
                    <option value="3">03</option>
                    <option value="4">04</option> 
                    <option value="5">05</option> 
                    <option value="6">06</option> 
                    <option value="7">07</option> 
                    <option value="8">08</option> 
                    <option value="9">09</option> 
                    <option value="10">10</option> 
                    <option value="11">11</option> 
                    <option value="12">12</option> 
                    <option value="13">13</option> 
                    <option value="14">14</option> 
                    <option value="15">15</option> 
                    <option value="16">16</option> 
                    <option value="17">17</option> 
                    <option value="18">18</option> 
                    <option value="19">19</option> 
                    <option value="20">20</option> 
                    <option value="21">21</option> 
                    <option value="22">22</option> 
                    <option value="23">23</option> 
                    <option value="24">24</option> 
                    <option value="25">25</option> 
                    <option value="26">26</option> 
                    <option value="27">27</option> 
                    <option value="28">28</option> 
                    <option value="29">29</option> 
                    <option value="30">30</option> 
                    <option value="31">31</option> 
                </select>

                <select name="select-year" id="select-yaer" data-inline="true">
                    <option value="2011">2011</option>
                    <option value="2012">2012</option>
                    <option value="2013">2013</option>
                    <option value="2014">2014</option> 
                    <option value="2015">2015</option> 
                    <option value="2016">2016</option> 
                    <option value="2017">2017</option> 
                    <option value="2018">2018</option> 
                    <option value="2019">2019</option> 
                    <option value="2020">2020</option> 
                    <option value="2021">2021</option> 
                    <option value="2022">2022</option> 
                    <option value="2023">2023</option> 
                    <option value="2024">2024</option> 
                    <option value="2025">2025</option> 
                    <option value="2026">2026</option> 
                    <option value="2027">2027</option> 
                    <option value="2028">2028</option> 
                    <option value="2029">2029</option> 
                    <option value="2030">2030</option> 
                </select>
        </div>
    </div>
</div>

Answer 2

如果你让它们都向左浮动，它们将并排放置，只要它们的组合宽度不超过容器的宽度。

Answer 3

尝试向左移动两个select标签并添加一个clear:both label上的样式。 如果您希望label位于两个选项之上，只需在标签下方添加<br /> 。

它看起来像

    <label>Label Value</label>
    <select>
        <option>Etc...</option>
    </select>
    <select>
        <option>Second select option...</option
    </select>

而CSS将是

    label {
        clear:both;
    }
    select {
        float:left;
    }

此外，作为单挑，您在第一个option标记之前结束第二个select标记，因此不包括它们。 <select name="select-year" id="select-yaer" data-inline = "true" style = "float: right"/> 。 您需要在标记结束前删除/ right。