2

正しく配置されていない選択リスト項目とは別に、うまく機能する JQuery Mobile Form があります。まだ画像を追加することはできませんが、すべてのフィールドの左側にラベルがあり、ギャップがあり、フィールドがすべて整列しています。選択メニューはギャップを省き、フィールドをラベルの直後に配置するため、他のすべてのラベルの左側にあります。

関連するコードのスニペットは次のとおりです。

<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

2 番目の選択ラベルにエラーがあります。この*for="user_group"*は正しいものではありません。 *正しい id="select_user_group"*を指す必要があります。したがって、2 番目の選択ボックスは次のようになります。

        <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 に答える