如何在jquery mobile中水平对齐标签和文本字段

Question

我正在开发 jQuery 手机。我有几个问题：

首先我使用了data-role="fieldcontain"，但标签和输入字段仍然不是水平的。 （不在同一行）

这是我的小提琴：http://jsfiddle.net/ravi1989/vb5jA/

<div data-role="page" id="foo">
    <div data-role="header" style="background: green;">
            <h1>Wbservice</h1>
    </div>
    <!-- /header -->
    <div data-role="content">
<div data-role="fieldcontain">
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value=""  />
</div>

        <label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
</select>
    </div>
    <!--pop up screen-->

    <!-- /content -->
    <div data-position="fixed" data-role="footer"style="background: green;">

         <h4>Page Footer</h4>

    </div>
    <!-- /header -->
</div>
<!-- /page -->

Answer 1

如果您希望它是水平的，您需要将另一个字段包含到您的翻转 .switch 中

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

但如果我理解的话，你不会认为标签和第一个输入是水平的。但是标签从输入字段的最上部开始，而不是在它们的中间居中。这就是 jQuery mobiles field contain 的工作原理。

http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-text.html

这是一个小提琴

http://jsfiddle.net/vb5jA/2/

如果您希望输入的中心稍微靠后一点，您可以随时为输入添加上边距，例如

 margin-top: 6px;