Question

72

aligning HTML select elements on one line

rated 0 times [ 76] [ 4] / answers: 1 / hits: 18535 / 13 Years ago, wed, july 27, 2011, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tierra

Add To Favorites

Follow

Total Points: 705

Total Questions: 85

Total Answers: 96

Location: Maldives

Member since Sat, Jan 29, 2022

2 Years ago

answered 13 Years ago taylert · Accepted Answer

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.