jquery移动阵容控制在一条线上

Question

如何将表单控件(如选择框和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"的同一字段集中.谢谢

Answer 1

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

\n\n

\n
• http://jsfiddle.net/CFxxt/
\n

\n\n

CSS

\n\n

#inline-select-container {\n    overflow:auto;\n}\n#inline-select-left {\n    float:left;\n}\n\n#inline-select-right {\n     float:right;\n}\n\xe2\x80\x8b\n

\n\n

超文本标记语言

\n\n

<div data-role="page" class="type-home">\n    <div data-role="content">\n\n        <div id="inline-select-container">\n\n            <div id="inline-select-left">    \n                <select name="select-choice-0" id="select-choice-1" data-inline="true">\n                   <option >Shipping method</option>\n                   <option value="standard">Standard: 7 day</option>\n                   <option value="rush">Rush: 3 days</option>\n                   <option value="express">Express: next day</option>\n                   <option value="overnight">Overnight</option>\n                </select>\n            </div>\n\n            <div id="inline-select-right">\n                <select name="select-choice-2" id="select-choice-2" data-inline="true">\n                   <option >Shipping method</option>\n                   <option value="standard">Standard: 7 day</option>\n                   <option value="rush">Rush: 3 days</option>\n                   <option value="express">Express: next day</option>\n                   <option value="overnight">Overnight</option>\n                </select>\n            </div>       \n\n        </div>  \n\n        <br />\n        <br />\n\n        <div id="inline-select-container">\n\n            <div id="inline-select-left">    \n                <label for="select-choice-0" class="select">Shipping method:</label>\n                <select name="select-choice-0" id="select-choice-1" data-inline="true">\n                   <option value="standard">Standard: 7 day</option>\n                   <option value="rush">Rush: 3 days</option>\n                   <option value="express">Express: next day</option>\n                   <option value="overnight">Overnight</option>\n                </select>\n            </div>\n\n            <div id="inline-select-right">\n                <label for="select-choice-2" class="select">Shipping method:</label>\n                <select name="select-choice-2" id="select-choice-2" data-inline="true">\n                   <option value="standard">Standard: 7 day</option>\n                   <option value="rush">Rush: 3 days</option>\n                   <option value="express">Express: next day</option>\n                   <option value="overnight">Overnight</option>\n                </select>\n            </div>       \n\n        </div>          \n    </div>\n</div>\xe2\x80\x8b\n

\n