如何使用JQuery Mobile格式化列表视图中的选择框

Question

这是我现在拥有的：http://jsfiddle.net/w6PAC/3/ 我希望选择按钮在计数器右侧，而不影响列表项的垂直大小和对齐方式。

我尝试过：

1. 基于.ul-li-count类创建CSS，但只能破坏jQM增强。 2. 将按钮单独创建在列表视图之外，但我无法垂直对齐它们。 3. 使用字段集、数据角色、div等进行试验，但没有成功。

据我所知，不可能以编程方式调用选择，否则我将向列表视图添加一个纯按钮。

非常感谢任何帮助，包括针对替代文档布局的建议。

- user172783

Answer 1

如果我理解正确，那么您可以使用一些相当简单的CSS来更改jQuery Mobile的默认布局：

/*absolutely position the <select> to the right side of the <li> and center it within the <li>*/
.custom_list .ui-select {
    position   : absolute;
    right      : 10px;
    top        : 50%;
    margin-top : -1.4em;
}
/*add some extra padding to the right side of the <li> to make the text wrap properly*/
.custom_list .ui-li {
    padding-right : 80px;
}
/*change the position of the <span class="ui-li-count"> to make room for the <select>*/
.custom_list .ui-li-count {
    right : 50px;
}

请注意，我使用.custom_list类来定位所需的<ul>元素，因此为了使这个解决方案正常工作，您必须从上面的CSS声明中删除.custom_list或将.custom_list类添加到您想要自定义的<ul>元素中。

这是上述解决方案的jsfiddle: http://jsfiddle.net/jasper/w6PAC/4/。

- Jasper