2012-03-15 14 views
2

JQuery Mobileは素晴らしいです!しかし、私はいくつかのスタイル済みのコンテンツを整列しようとしています。ここで詳しく述べるカウントバブルを使用するリストがあります。http://jquerymobile.com/demos/1.1.0-rc.1/docs/lists/lists-count.htmlJQuery Mobileのコンテンツの整列

私は実際にバブルを左揃えにしたいと考えています。しかし、私が何をしていても、それは右揃えです。バブルを最も左の要素にしてから、タイトル/サブタイトル形式にする方法はありますか?

ありがとうございます!代わりに

あなたはまた、mobile.cssファイルにこのクラスを変更することができます

だけであることを

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

は.ui-LIカウントされることがあります。

答えて

3

あなたがそうのような.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/(カウントバブルなしリスト項目に注目してくださいインデントされません)

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

は、HTMLの簡単なデモがlistviewウィジェット内のリスト・アイテムに適用されます

0

は、DOMがロードされた後、このような何かをやってみてください最初から左に浮いている。

関連する問題