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;

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

1 个答案: