在一行上对齐HTML选择元素 [英] aligning HTML select elements on one line
问题描述
我正在使用HTML / CSS / JavaScript的移动应用程序。我有两个选择选项（下拉菜单），一个用于日期数量，另一个用于多少年。我希望能够在一行中看到这些选择选项，但无论我做什么，我都会在一行和下一行中看到一个下拉菜单（日期数），我可以看到多少年的下拉菜单。下面你可以看到我的代码
< div data-role =controlgroupdata-type =horizontal>
< label for =select-choice-1>选择到期日期< / label>
< 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>
< 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移动框架测试这些代码。请尝试同时浮动选择标签并添加一个 >清除：与标签上的样式相关。如果您希望两个选择上方的标签，只需在标签下方添加< br /> 。
它看起来像
< / label>标签值< / label>
< select>
< option>等等...< / option>
< / select>
< ; select>
< option>第二选择选项...< / option
< / select>
和CSS将是
标签{
clear：both;
}
选择{
float：left;
}
另外，作为单挑，你会结束第二个在第一个标记，因此不包括它们。 选项标记之前选择
< select name =select-yearid =select-yaerdata-inline =truestyle =float：right/> 。您需要在标签结束之前摆脱 / 。
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.
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.
这篇关于在一行上对齐HTML选择元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
