css - jQuery 手机 : Blue focus halo gets clipped when placing controls inside ui-grid

Question

我正在尝试使用“ui-grid-a”将文本字段分组到同一行。

但是蓝色光晕在字段的左侧和右侧被剪掉了。

    <ul data-role="listview" data-inset="true">
        <li>
            <label>Label A</label>
            <input data-id="name" type="text" value="" placeholder="" title="">
        </li>
        <li>
            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <label>Label B</label>
                    <input data-id="email" type="text" value="" placeholder="" title="">
                </div>
                <div class="ui-block-b">
                    <label>Label C</label>
                    <input data-id="phone" type="text" value="" placeholder="" title="">
                </div>
            </div>
        </li>
    </ul>

此处示例:http://jsfiddle.net/N8ZUt/1/

将焦点设置到“标签 a”，然后是“标签 b”，您应该会看到区别。

Answer 1

你只需要添加一点填充:

li .ui-block-a, li .ui-block-b  {
    padding-right: 4px;
    padding-left: 4px;
}

此外，为了保持对齐，我已将您的第一个列表项放入具有相同填充的 ui-grid-solo 中。

这是您更新的 fiddle : http://jsfiddle.net/ezanker/N8ZUt/4/