javascript 在一行上对齐 HTML 选择元素

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6846384/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 22:04:12  来源:igfitidea点击:

aligning HTML select elements on one line

javascripthtmlcssjquery-mobile

提问by Loolooii

i am working on a mobile app using HTML/CSS/JavaScript. I have two select option (drop down menu), one for number of dates and the other one for number of years. I want to be able to see these select options in one line, but no matter what I do, I get a drop down menu (number of dates) on one line and on the next line I get the drop down menu for number of years. Below you can see my codes

我正在使用 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>

UPDATE: I am testing these codes on Android browser using jQuery mobile framework.

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

采纳答案by ayyp

Try floating both selecttags left and adding a clear:bothto the styling on the label. If you want the labelabove the two selects, just add a <br />right below the label.

尝试select向左浮动两个标签并clear:bothlabel. 如果你想要label上面的两个选择,只需<br />在标签下方添加一个。

It would look something like

它看起来像



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

and the CSS would be

和 CSS 将是



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

Also, as a heads-up, you end your second selecttag before the first optiontag, so they aren't included. <select name="select-year" id="select-yaer" data-inline = "true" style = "float: right"/>. You need to get rid of the /right before the ending of the tag.

此外,作为提醒,您select在第一个option标签之前结束第二个标签,因此它们不包括在内。 <select name="select-year" id="select-yaer" data-inline = "true" style = "float: right"/>. 你需要/在标签结束前去掉右边。

回答by Phill Pafford

It's the width on the ui-select class that's causing your issue, Setting the width to auto should correct the issue. jQM adds a ton of extra markup for the look and feel on the page to be consistent across multiple devices. If you view the page source in a browser such as Chrome or FireFox you can see the extra elements. In your case you needed to modify the ui-select class as it has a width of 60% as the default.

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

Live Example:

现场示例:

JS:

JS:

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

HTML:

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>

回答by shanethehat

If you make them both float left they will sit side by side, as long as their combined widths don't exceed the width of the container.

如果您让它们都向左浮动,只要它们的组合宽度不超过容器的宽度,它们就会并排放置。