6

如何在 jquery 的一行中排列表单控件，如选择框和其他控件，而不是让它们垂直显示？

<label for="select-choice-0" class="select">Shipping method:</label>
<select name="select-choice-0" id="select-choice-1">
   <option value="standard">Standard: 7 day</option>
   <option value="rush">Rush: 3 days</option>
   <option value="express">Express: next day</option>
   <option value="overnight">Overnight</option>
</select>
<label for="select-choice-2" class="select">Shipping method:</label>
<select name="select-choice-2" id="select-choice-2">
   <option value="standard">Standard: 7 day</option>
   <option value="rush">Rush: 3 days</option>
   <option value="express">Express: next day</option>
   <option value="overnight">Overnight</option>
</select>

我不希望它们与 data-type="horizo​​ntal" 在同一个字段集中。谢谢

4

3 回答 3

2

网格布局对您有用吗？这是一个例子：

HTML

<div data-role="page" class="type-home">
    <div data-role="content">

        <div class="ui-grid-a">
            <div class="ui-block-a">
                <select name="select-choice-0" id="select-choice-1">
                   <option>Shipping method</option>
                   <option value="standard">Standard: 7 day</option>
                   <option value="rush">Rush: 3 days</option>
                   <option value="express">Express: next day</option>
                   <option value="overnight">Overnight</option>
                </select>
            </div>
            <div class="ui-block-b">
                <select name="select-choice-2" id="select-choice-2">
                   <option>Shipping method</option>
                   <option value="standard">Standard: 7 day</option>
                   <option value="rush">Rush: 3 days</option>
                   <option value="express">Express: next day</option>
                   <option value="overnight">Overnight</option>
                </select>
            </div>       
        </div>

    </div>
</div>​

网格布局选项的文档

于 2012-07-03T13:16:27.143 回答
1

我喜欢jquery-mobile-960。

jquery-mobile-960 是 960 网格到 jquery mobile 的端口。它融合了 960.gs 的灵活性和 jquery mobile 的易用性。它旨在为 jquery-mobile 布局带来更大的灵活性，从而使其更易于在平板电脑上使用。

于 2012-07-09T20:20:58.917 回答
0

使用 CSS 和 data-inline="true" 标记的替代示例

CSS

#inline-select-container {
    overflow:auto;
}
#inline-select-left {
    float:left;
}

#inline-select-right {
     float:right;
}
​

HTML

<div data-role="page" class="type-home">
    <div data-role="content">

        <div id="inline-select-container">

            <div id="inline-select-left">    
                <select name="select-choice-0" id="select-choice-1" data-inline="true">
                   <option >Shipping method</option>
                   <option value="standard">Standard: 7 day</option>
                   <option value="rush">Rush: 3 days</option>
                   <option value="express">Express: next day</option>
                   <option value="overnight">Overnight</option>
                </select>
            </div>

            <div id="inline-select-right">
                <select name="select-choice-2" id="select-choice-2" data-inline="true">
                   <option >Shipping method</option>
                   <option value="standard">Standard: 7 day</option>
                   <option value="rush">Rush: 3 days</option>
                   <option value="express">Express: next day</option>
                   <option value="overnight">Overnight</option>
                </select>
            </div>       

        </div>  

        <br />
        <br />

        <div id="inline-select-container">

            <div id="inline-select-left">    
                <label for="select-choice-0" class="select">Shipping method:</label>
                <select name="select-choice-0" id="select-choice-1" data-inline="true">
                   <option value="standard">Standard: 7 day</option>
                   <option value="rush">Rush: 3 days</option>
                   <option value="express">Express: next day</option>
                   <option value="overnight">Overnight</option>
                </select>
            </div>

            <div id="inline-select-right">
                <label for="select-choice-2" class="select">Shipping method:</label>
                <select name="select-choice-2" id="select-choice-2" data-inline="true">
                   <option value="standard">Standard: 7 day</option>
                   <option value="rush">Rush: 3 days</option>
                   <option value="express">Express: next day</option>
                   <option value="overnight">Overnight</option>
                </select>
            </div>       

        </div>          
    </div>
</div>​
于 2012-07-03T13:36:46.517 回答