在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文件改变这个类只是也从一开始就离开了。