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

how to align label and text field horizontally in jquery mobile

本文关键字：标签 对齐 文本 字段 水平 jquery Mobile      更新时间：2023-09-26

我正在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 -->
如果你想

水平，你需要在你的翻转.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

这是一个小提琴

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

如果您希望

输入更靠前一点，您可以随时为输入添加上边距，例如

 margin-top: 6px;
相关文章：