jQuery Mobile水平选择框

我一直在努力让这个工作正常。我试图让水平分层选择输入的工作，我的手机网站从这个页面：jQuery Mobile水平选择框

http://jquerymobile.com/demos/1.0/docs/forms/selects/

现在我的选择框看起来像这样：

enter image description here

但是，当我认为它看起来像这样的例子：

enter image description here

我的HTML看起来像这样：

<fieldset data-role="controlgroup" data-type="horizontal"> 
    <select name="select-choice-month" id="select-choice-month"> 
     <option>M</option> 
     <option value="January">January</option> 
     <option value="February">February</option> 
     <option value="March">March</option> 
     <option value="April">April</option> 
     <option value="May">May</option> 
     <option value="June">June</option> 
     <option value="July">July</option> 
     <option value="August">August</option> 
     <option value="September">September</option> 
     <option value="October">October</option> 
     <option value="November">November</option> 
     <option value="December">December</option> 
    </select> 
    <select name="select-choice-day" id="select-choice-day"> 
     <option>D</option> 
     <?php while($c < 32) { 
      echo '<option value="'.$c.'">'.$c.'</option>'; 
      $c++; 
     } ?> 
    </select> 
    <select name="select-choice-year" id="select-choice-year"> 
     <option>Y</option> 
     <option value="2012">2012</option> 
     <option value="2013">2013</option> 
     <option value="2014">2014</option> 
    </select> 
</fieldset>

而我包括脚本是这样的：

<link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<script src="//code.jquery.com/jquery-1.6.4.js"></script> 
<script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

我试图复制和粘贴确切的例子，我仍然得到了垂直和水平不，我在这里做错了什么？

来源

2012-10-05 SSH This

看起来没有足够的空间来水平对齐它们。从他们的页面：“请注意，触发选择的按钮将根据当前选定的选项值调整大小。请注意，不支持display：inline-block的浏览器将垂直分组，如上所述。如果你侧身倾斜设备会发生什么？ – sarcastyx

好点，我希望这会是这样。我倾斜了它，我也尝试使所有的选择更小（也许选择框的宽度最长的值），但我遇到了同样的问题。 jQuery手机网站上的示例是正确的，但我网站上的相同代码无法正常工作。好的建议，但。 –

尝试玩'初始规模'。你可以在这里阅读更多关于'viewport'的参考资料：http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html。你也可以尝试这里提到的：http://stackoverflow.com/questions/7152474/confused-on-initial-scale-1-0-iphone-3gs-vs-4。 – sarcastyx

好的。所以更多地使用它，并且我可以根据需要选择正确的选项。这些是我改变了：

<meta name="viewport" content="width=device-width, initial-scale=0.9">

请记住，initial-scale值将根据您的页面设计的宽度变化。

然后，我改变了选择的选项如下：

<div data-role="fieldcontain"> 
    <div data-role="controlgroup" data-type="horizontal"> 
     <select name="select-choice-month" id="select-choice-month" data-mini="true"> 
     <option>Month</option> 
     <option value="jan">January</option> 
     <!-- etc. --> 
     </select> 

     <select name="select-choice-day" id="select-choice-day" data-mini="true"> 
     <option>Day</option> 
     <option value="1">1</option> 
     <!-- etc. --> 
     </select> 

     <select name="select-choice-year" id="select-choice-year" data-mini="true"> 
     <option>Year</option> 
     <option value="2011">2011</option> 
     <!-- etc. --> 
     </select> 
    </div> 
</div>

一些奇怪的原因加入legend标签内的controlgroup包装打破了设计。不知道这是否是一个错误。如果你想在下拉菜单标题，那么你可以做到以下几点：

<div data-role="controlgroup" data-type="horizontal"> 
    <div style="font-weight: bold;">Date of Birth</div>

这些变化为我工作在我的iPhone4，HTC One和iPad的（有一大堆更多的在iPad上房地产，所以它总是能够工作，但是无论如何都在测试它）。

来源

2012-10-06 03:00:51 sarcastyx

辉煌的东西，欢呼队友 –

没问题。一边玩，一边学习了很多东西。 – sarcastyx

jQuery Mobile水平选择框

回答

相关问题