jQuery Mobile 水平选择框答案

【问题标题】：jQuery Mobile Horizontal Select BoxjQuery Mobile 水平选择框
【发布时间】：2012-10-06 11:00:51
【问题描述】：

我一直在努力让它正常工作。我正在尝试通过此页面在我的移动网站上使水平分组的选择输入工作：

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

现在我的选择框如下所示：

但是当我查看示例时，它看起来像这样：

我的 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>

我已经尝试完全复制和粘贴示例，但我仍然得到垂直而不是水平，我在这里做错了什么？

【问题讨论】：

似乎没有足够的空间将它们全部水平对齐。从他们的页面：“请注意，触发选择的按钮将根据当前选择的选项的值调整大小。请注意，不支持 display: inline-block; 的浏览器将垂直分组选择，如上。”如果将设备向侧面倾斜会怎样？
好点，我希望会是这样。我将它侧向倾斜，并尝试将所有选择缩小（也许选择框的宽度与最长的值一样宽），但我遇到了同样的问题。 jQuery 移动网站上的示例是正确的，但我网站上的相同代码不起作用。不过建议很好。
尝试使用initial-scale。您可以在此处阅读有关viewport 参考的更多信息：developer.apple.com/library/safari/#documentation/…。你也可以试试这里提到的：stackoverflow.com/questions/7152474/….

标签： javascript jquery html css jquery-mobile

【解决方案1】：

好的。所以多玩一些，我让选择选项按你的意愿工作。这些是我所做的更改：

<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>

由于某些奇怪的原因，在 controlgroup 包装器内添加 legend 标记会破坏设计。不知道这算不算bug。如果您想要下拉菜单的标题，则可以执行以下操作：

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

这些更改在我的 iPhone4、HTC One 和 iPad 上对我有用（iPad 上有更多的空间，所以它总是可以工作。但无论如何都在那里进行了测试）。

【讨论】：

没问题。在玩它的过程中，我自己学到了很多东西。