javascript - 如何在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

You need to add another field contain to your flip .switch if you want it horizontal

<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>

But if I understand, you don't think the label and the first input are horizontal. But the labels start at the upper most part of the input fields instead of centering in the middle of them. Thats how jQuery mobiles field contain works.

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

Here is a fiddle

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

And you can always add a top margin to your inputs if you want them centered down a bit farther e.g.

 margin-top: 6px;