Question

JQuery Mobile真棒！但是，我正在尝试调整一些预先设定的内容。我有一个使用计数气泡的列表，如下所示：http://jquerymobile.com/demos/1.1.0-rc.1/docs/lists/lists-count.html

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

谢谢！

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

Answer 2

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

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

可能会改为.ui-li-count

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

在JQuery Mobile中调整内容

2 个答案: