表单元素不在同一行

【问题标题】：Form Elements Not Going In Same Line表单元素不在同一行
【发布时间】：2013-07-04 02:16:52
【问题描述】：

使用 jQuery mobile，我试图将一个开关和一个按钮放在同一行，但是它不起作用并且两个元素都在不同的行中：

代码：

<div data-role="fieldcontain">
    <label for="switch">Privacy:</label>
    <select name="switch" id="switch" data-role="slider">
        <option value="0">Private</option>
        <option value="1">Public</option>
    </select>
    <a href="#switchinfo" data-role="button" data-icon="info" data-iconpos="notext" data-rel="dialog">Switch Info</a>
</div>

我需要解决什么问题？

【问题讨论】：

标签： jquery forms mobile switch-statement jsfiddle

【解决方案1】：

使用Three-column grids。演示http://jsfiddle.net/yeyene/Rdfxs/17/

        <div data-role="fieldcontain">
            <div class="ui-grid-b">
                <div class="ui-block-a"><label for="switch">Privacy:</label></div>
                <div class="ui-block-b">
                    <select name="switch" id="switch" data-role="slider">
                        <option value="0">Private</option>
                        <option value="1">Public</option>
                    </select>
                </div>
                <div class="ui-block-c">
                    <a href="#switchinfo" data-role="button" data-icon="info" data-iconpos="notext" data-rel="dialog">Switch Info</a>
                </div>
            </div><!-- /grid-b -->     
        </div>

*还有data-inline="true"，但是标签会换行。

演示http://jsfiddle.net/yeyene/cHqsJ/1/

【讨论】：