Javascript 在一行上对齐HTML选择元素
我正在使用HTML/CSS/JavaScript开发一个移动应用程序。我有两个选择选项（下拉菜单），一个用于日期数，另一个用于年份数。我希望能够在一行中看到这些选择选项，但无论我做什么，我都会在一行中看到一个下拉菜单（日期数），在下一行中，我会看到若干年的下拉菜单。下面你可以看到我的代码Javascript 在一行上对齐HTML选择元素,javascript,html,css,jquery-mobile,Javascript,Html,Css,Jquery Mobile,我正在使用HTML/CSS/JavaScript开发一个移动应用程序。我有两个选择选项（下拉菜单），一个用于日期数，另一个用于年份数。我希望能够在一行中看到这些选择选项，但无论我做什么，我都会在一行中看到一个下拉菜单（日期数），在下一行中，我会看到若干年的下拉菜单。下面你可以看到我的代码 <div data-role="controlgroup" data-type = "horizontal" > <label for="select-choice-1" &
<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>
选择有效期
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
我正在使用jQuery mobile framework在Android浏览器上测试这些代码。如果让它们都向左浮动，它们将并排放置，只要它们的组合宽度不超过容器的宽度。尝试向左浮动两个
选择标记，并在标签上的样式中添加清除：两个。如果要在这两个选项上方添加标签
，只需在标签的正下方添加一个
看起来像
<label>Label Value</label>
<select>
<option>Etc...</option>
</select>
<select>
<option>Second select option...</option
</select>
另外，作为提示，您在第一个选项
标记之前结束第二个选择
标记，因此它们不包括在内。
。您需要在标记结束之前清除/
。导致问题的是ui选择类上的宽度，将宽度设置为“自动”应该可以纠正问题。jQM为页面上的外观添加了大量额外的标记，以便在多个设备上保持一致。如果您在浏览器（如Chrome或FireFox）中查看页面源代码，您可以看到额外的元素。在您的例子中，您需要修改ui select类，因为它的默认宽度为60%
实例：
JS:
HTML:
选择有效期
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
日期下拉列表和“选择到期日期”标签是否占用了第一行的所有空间？
元素是内联元素，因此如果您不给它们任何样式，它们自然会在同一行。对不起，我刚刚更新了我的问题！除了在select元素上浮动之外，还有其他CSS应用吗？我在代码中使用了CSS，但是对于select选项，我没有使用任何CSS
label {
clear:both;
}
select {
float:left;
}
$('#select-choice-1').parent().parent().css('width','auto');
<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>