Как отформатировать выбор в просмотре списка, используя JQuery Mobile

Question

Это то, что у меня сейчас есть: http://jsfiddle.net/w6PAC/3/

Я хочу, чтобы кнопка выбора находилась справа от счетчика, чтобы она не влияла на размер по вертикали и выравнивание элемента списка.

Я пробовал:

1. создание CSS на основе класса .ul-li-count, но удалось сломать только расширение jQM.
2. создавая кнопки отдельно вне списка, но я не смог выровнять их по вертикали.
3. безуспешно играет с наборами полей, ролями данных, элементами div и т. Д.

AFAIK, невозможно вызвать программный выбор, иначе я бы добавил простую кнопку в просмотр списка.

Любая помощь приветствуется, включая предложения по альтернативным макетам документов.

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/