将两个元素放在一行上 jQuery Mobile答案

【问题标题】：Put two elements on one line jQuery Mobile将两个元素放在一行上 jQuery Mobile
【发布时间】：2013-07-23 10:35:28
【问题描述】：

我想在切换开关旁边放一个按钮，但是按钮一直移动到第二行。

jsFiddle

http://jsfiddle.net/wHSHb/

HTML

<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-rel="dialog" data-role="button" data-icon="info" data-iconpos="notext">Switch Info</a>
</div>

我尝试通过将两者放在同一个字段中来解决这个问题。但是，这并没有解决问题。

【问题讨论】：

标签： jquery html forms mobile alignment

【解决方案1】：

看看here。

.info
{
    float: right;
}

您还可以添加一些边距以根据需要定位它。例如：

margin-right:30%;

【讨论】：

【解决方案2】：

另一种解决方案，使用网格布局： http://jsfiddle.net/ZdkTG/2/

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

        </div>
    </fieldset>
</div>

【讨论】：