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

Question

我正在研究 jQuery 手机。我有几个问题:

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

这是我的 fiddle :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

如果你想要它水平，你需要添加另一个字段包含到你的 flip .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 手机 field contain 的工作原理。

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

这是一个 fiddle

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

如果您希望它们居中向下一点，您始终可以为输入添加上边距，例如

 margin-top: 6px;