2

我有一个 JQuery 移动表单，除了没有正确对齐的选择列表项之外，它的效果很好。我还不能添加图片，但是所有字段的左侧都有标签，有一个间隙，然后字段全部对齐。选择菜单留下了空白，并在标签之后立即对齐字段，因此它位于所有其他标签的左侧。

相关的代码片段在这里：

<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 上的行为是相同的。

任何线索将不胜感激。

谢谢，

格伦

4

1 回答 1

1

您在第二个选择标签处有错误。这个*for="user_group"*不是一个正确的，它需要指向*correct 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/

于 2012-12-28T12:02:16.920 回答