在JQuery Mobile中對齊內容

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麗計數代替

您也可以在mobile.css文件改變這個類只是也從一開始就離開了。