Question

我尝试使用＆＃34; ui-grid-a＆＃34;将文本字段组合在同一行上。

但是蓝色的光环在田野的左侧和右侧被夹住了。

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

将焦点设置为＆＃34;标记a＆＃34;然后＆＃34;标签b＆＃34;你应该看到差异。

Answer 1

你只需要添加一点填充：

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

另外，为了保持一致，我将第一个列表项放在ui-grid-solo中，并使用相同的填充。

以下是您更新的小提琴： http://jsfiddle.net/ezanker/N8ZUt/4/

jQuery Mobile：当在ui-grid内放置控件时，蓝色焦点光晕会被剪裁

1 个答案: