Question

我有两个选择按钮，我试图将它们并排放置并占据屏幕的宽度。我已经接近使用网格或将它们放在控制组中。使用网格时，每个按钮占据屏幕的50％，但它们不会触摸。在控制组中，选择按钮会触摸，但我无法使其适合屏幕。这是两个实现。 Here is the js fiddle to show what I have so far

 <div data-role="controlgroup"  data-type="horizontal">
        <select name="select_networks" id="select_networks">
            <option value="1/1">Everyone</option>
            <option value="2/1">Friends</option>
        </select>
        <select name="select_sort" id="select_sort">
            <option value="1">Points</option>
            <option value="2">New</option>
        </select>
    </div>

    <div class="ui-grid-a">
        <div class="ui-block-a"> <select name="select_networks" id="select_networks">
                <option value="1/1">Everyone</option>
                <option value="2/1">Friends</option>
            </select></div>
        <div class="ui-block-b">
            <select name="select_sort" id="select_sort">
                <option value="1">Points</option>
                <option value="2">New</option>
            </select></div>
    </div>

Answer 1

使用导航栏可以执行此操作，只需确保它未包含在内容div中

http://jsfiddle.net/aFGxy/9/

HTML

<div data-role="page" id="contest" data-theme="a">

   <div data-role="content">



    </div>

    <div data-role="navbar">
            <ul>
                <li>
                     <select name="select_networks" id="select_networks" data-corners="false">
                        <option value="1/1">Everyone</option>
                        <option value="2/1">Friends</option>
                    </select>
                </li>
                <li>
                     <select name="select_sort" id="select_sort" data-corners="false">
                        <option value="1">Points</option>
                        <option value="2">New</option>
                    </select>
                </li>
            </ul>
        </div>

</div>

如何在jquery mobile中并排设置两个选择菜单并填充页面的宽度

1 个答案: