JQuery Mobile 中同一行的格式标签和切换开关答案

【问题标题】：Format label and toggle switch on same line in JQuery MobileJQuery Mobile 中同一行的格式标签和切换开关
【发布时间】：2013-07-12 21:18:38
【问题描述】：

我正在尝试找到创建以下 html 元素的 Javascript 等效项：

<div data-role="fieldcontain">
<label for="slider">Select slider:</label>
<select name="slider" id="slider" data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
</select>

这会将标签放在同一行。

这是我的尝试，但标签位于切换开关下方。我不知道格式化 data-role="fieldcontain" div 的 JQuery 方法。

http://jsfiddle.net/2ckHr/13/

HTML

<div data-role="content" id="content">
</div>

$('<div data-role="fieldcontain"><label>Label</label><select class="flip" name="flip-1" id="flip-1" data-role="slider"><option value="off">Off</option><option value="on">On</option></select></div>').appendTo($("#content"));

$(".flip").slider();

$('<button id="submit">Submit</button>').appendTo($("#content")).button();

$(document).delegate("#submit", "vclick", function() { alert($("#flip-1").val()); });

【问题讨论】：

抱歉，我不明白你想要什么？
抱歉，已编辑帖子以使其更清晰。在纯 HTML 版本中，标签与切换开关内联。在混合版本中，标签位于切换开关下方。
使用ui-gridjsfiddle.net/Palestinian/2ckHr/16
如果一切都失败了，你可以在创建标签时给它一个内联样式...$('<div data-role="fieldcontain"><label style="vertical-align:1em">Jauhar等等。

标签： javascript jquery html iphone jquery-mobile

【解决方案1】：

最简单的内联方式是在标签中添加一些 CSS：

<label for="slider" style="display: inline; vertical-align: 1.2em;">Select slider:</label>

这可以在 CSS 类中考虑，注意显示覆盖：

 .switchlabel { display: inline !important; vertical-align: 0.8em; }

如果计算vertical-align 值不可行，则必须在控件创建后更改样式。您必须将vertical-align: middle; 添加到此元素（由 jQuery Mobile 创建）：

<div role="application" class="ui-slider ui-slider-switch ...

【讨论】：