Выравнивание контента в JQuery Mobile

Question

JQuery Mobile УДИВИТЕЛЬНЫЙ! Тем не менее, я пытаюсь выровнять некоторый предварительно стилизованный контент. У меня есть список, который использует количество пузырьков, как описано здесь: http://jquerymobile.com/demos/1.1.0-rc.1/docs/lists/lists-count.html

Я действительно хочу иметь возможность выровнять пузырь по левому краю. Тем не менее, независимо от того, что я делаю, это выравнивается по правому краю. Есть ли способ сделать пузырь самым левым элементом, а затем иметь формат заголовка / субтитра?

Спасибо!

Answer 1

Вы можете изменить CSS для элемента .ui-li-count следующим образом:

/*target the count bubbles and left align them, by default they are right aligned*/
.ui-page .ui-content .ui-listview .ui-li-count {
    left  : 10px;
    right : auto;
}

/*target the link in which the count bubbles reside and add some padding so the bubbles and link text don't overlap*/
/*notice this is only applied to list-items that actually have count bubbles*/
.ui-page .ui-content .ui-listview .ui-li-has-count .ui-btn-text a {
    padding-left : 55px;
}

Вот демонстрационная версия: http://jsfiddle.net/vAjDn/1/ (Обратите внимание, что элемент списка без пузыря счетчикас отступом)

Вот краткая демонстрация HTML, примененного к элементам списка в виджете listview:

<li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-count ui-btn-up-c">
    <div class="ui-btn-inner ui-li">
        <div class="ui-btn-text">
            <a href="index.html" class="ui-link-inherit">
                Inbox
                <span class="ui-li-count ui-btn-up-c ui-btn-corner-all">12</span>
            </a>
        </div>
        <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
    </div>
</li>

Answer 2

После загрузки DOM попробуйте сделать что-то вроде этого:

$(".ui-li-aside").css('float','left');

Может быть вместо .ui-li-count

Вы также можете изменить этот класс в файле mobile.cssпросто быть плавающим влево с самого начала.