jquery - 如何使用 JQuery Mobile 格式化 ListView 中的选择

Question

这是我现在拥有的:http://jsfiddle.net/w6PAC/3/

我希望选择按钮位于计数的右侧，而不影响列表项的垂直大小和对齐方式。

我试过:

1. 基于 .ul-li-count 类创建 CSS，但仅设法破坏 jQM 增强。
2. 在 ListView 外单独创建按钮，但无法垂直对齐它们。
3. 尝试使用字段集、数据 Angular 色、div 等，但没有成功。

据我所知，不可能以编程方式调用选择，否则我会向 ListView 添加一个普通按钮。

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

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>元素，因此要使此解决方案正常工作，您必须删除 .custom_list从上面的 CSS 声明或添加 .custom_list类到 <ul>您要自定义的元素。

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