JQuery Mobile 选择列表对齐

Question

我有一个 JQuery Mobile 表单，除了无法正确对齐的选择列表项之外，它的工作效果非常好。我还无法添加图片，但所有字段的左侧都有标签，有一个间隙，然后字段全部对齐。选择菜单忽略了间隙，并将字段紧跟在标签之后对齐，因此它位于所有其他标签的左侧。

相关代码片段如下:

<div data-role="fieldcontain">
<label for="sms-alert"><b>SMS Alert:</b></label>
        <select name="sms-alert" id="sms-alert" data-role="slider">
             <option value="off">Off</option>
        <option value="on" selected="true">On</option>
        </select> 
</div>

<div data-role="fieldcontain" >
    <label for="user_group" ><b>User Group:</b></label>
    <select name="select_user_group" id="select_user_group" >
        <option value="manager" >Manager</option>
        <option value="delivery" >Delivery</option>
        <option value="kitchen" >Kitchen</option>
        <option value="serving" >Serving</option>
    </select>
</div>

...

我没有该项目的 CSS 特定样式功能。 该行为在 eclipse IDE 浏览器、Chrome 和 iOS Chrome、Safari 和 iOS Safari 上是相同的。

任何线索将不胜感激。

谢谢

格伦

Answer 1

第二个选择标签处出现错误。此 *for="user_group"* 不是正确的，它需要指向 *正确的 id="select_user_group"*。所以你的第二个选择框应该如下所示:

        <div data-role="fieldcontain" >
            <label for="user_group"  class="select"><b>User Group:</b></label>
            <select name="user_group" id="user_group" >
                <option value="manager" >Manager</option>
                <option value="delivery" >Delivery</option>
                <option value="kitchen" >Kitchen</option>
                <option value="serving" >Serving</option>
            </select>
        </div> 

这是一个适合您的工作示例:http://jsfiddle.net/Gajotres/Y3pzf/