在 JQuery Mobile 中对齐内容答案

【问题标题】：Aligning Content in JQuery Mobile在 JQuery Mobile 中对齐内容
【发布时间】：2012-03-15 21:08:00
【问题描述】：

JQuery Mobile 太棒了！但是，我正在尝试对齐一些预先设置样式的内容。我有一个使用计数气泡的列表，详见此处：http://jquerymobile.com/demos/1.1.0-rc.1/docs/lists/lists-count.html

我真的希望能够左对齐气泡。但是，无论我做什么，它都是右对齐的。有没有办法让气泡成为最左边的元素然后有标题/副标题格式？

谢谢！

【问题讨论】：

标签： jquery css listview jquery-mobile

【解决方案1】：

您可以像这样更改 .ui-li-count 元素的 CSS：

/*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/（请注意，没有计数气泡的列表项不会缩进）

以下是应用于listview 小部件中列表项的 HTML 的快速演示：

<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>

【讨论】：

【解决方案2】：

DOM 加载后，尝试执行以下操作：

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

可能是 .ui-li-count

您也可以将 mobile.css 文件中的此类更改为从一开始就向左浮动。

【讨论】：