Question

我正在使用Jquery mobile，并希望使用data-type="horizontal"将两个输入按钮（加/减）和一个输入文本分组到同一行。

小提琴将展示它今天的样子：http://jsfiddle.net/ezanker/hhken790/4/

我想得到类似的东西：

<div data-role="controlgroup" data-type="horizontal" >
<a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext">Minus</a>
<a href="index.html" data-role="button">Value here</a>
<a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext">Plus</a>
</div>

但是支持输入按钮并将值添加到输入中。

Answer 1

您可以使用jQuery mobile中提供的内容网格获得此效果。

const int&

JSFiddle Example

jQuery Mobile Content Grids

Answer 2

有不同的方法可以做到这一点。一种简单的方法是使用具有固定宽度TD的表格用于按钮：

<table class="QtyWrapper">
    <tr>
        <td class="plusminusbtn"><a href="#" data-role="button" data-icon="minus" data-iconpos="notext" class="qtyminus">Minus</a></td>
        <td><input class="qty" type="text" value=""    /></td>
        <td class="plusminusbtn"><a href="#" data-role="button" data-icon="plus" data-iconpos="notext"  class="qtyplus">Plus</a></td>
    </tr>
</table>  

.QtyWrapper {
    width: 100%;
}
.plusminusbtn {
    width: 1%;
}

更新了 FIDDLE

将输入分组到Jquery mobile中的同一行

2 个答案: