выравнивание элементов HTML в одной строке - PullRequest
Новая
       2

выравнивание элементов HTML в одной строке

6 голосов
/ 27 июля 2011

Я работаю над мобильным приложением, используя 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>

ОБНОВЛЕНИЕ: я тестирую эти коды в браузере Android, используя мобильную среду jQuery.

Ответы [ 3 ]

2 голосов
/ 27 июля 2011

Это ширина класса ui-select, вызывающая вашу проблему. Установка ширины в auto должна исправить проблему. jQM добавляет тонну дополнительной разметки для того, чтобы внешний вид на странице был согласованным на нескольких устройствах. Если вы просматриваете источник страницы в браузере, таком как Chrome или FireFox, вы можете увидеть дополнительные элементы. В вашем случае вам нужно было изменить класс ui-select, так как он имеет ширину 60% по умолчанию.

Live Пример:

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>
1 голос
/ 27 июля 2011

Попробуйте переместить оба тега 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;
    }

Кроме того, в качестве хедз-апа вы заканчиваете свой второй тег select перед первым тегом option, поэтому они не включаются. <select name="select-year" id="select-yaer" data-inline = "true" style = "float: right"/>. Вам нужно избавиться от / прямо перед окончанием тега.

1 голос
/ 27 июля 2011

Если вы заставите их обоих плавать влево, они будут сидеть рядом, если их общая ширина не превышает ширину контейнера.

...