admin管理员组

文章数量:1279008

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

<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.

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

<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.

  • javascript
  • html
  • css
  • jquery-mobile
Share Improve this question edited Jul 27, 2011 at 14:59 Loolooii asked Jul 27, 2011 at 14:49 LoolooiiLoolooii 9,19014 gold badges69 silver badges92 bronze badges 5
  • Is the date drop-down and 'Choose Expiry Date' label taking up all the space on the first line? – ngen Commented Jul 27, 2011 at 14:54
  • 1 <select> elements are inline elements, so they'll be on the same line naturally if you don't give them any style. – Pointy Commented Jul 27, 2011 at 14:56
  • Sorry, I just updated my question! – Loolooii Commented Jul 27, 2011 at 14:59
  • Do y6ou have any other CSS being applied other than that floats on the select elements? – shanethehat Commented Jul 27, 2011 at 15:02
  • I have used CSS within my code, but for the Select Option specifically I didnt use any CSS – Loolooii Commented Jul 27, 2011 at 15:06
Add a ment  | 

3 Answers 3

Reset to default 2

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

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



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

Also, as a heads-up, you end your second select tag before the first option tag, 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.

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.

Live Example:

  • http://jsfiddle/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>

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

本文标签： javascriptaligning HTML select elements on one lineStack Overflow

版权声明：本文标题：javascript - aligning HTML select elements on one line - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741215802a2360020.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。