2

jquery mobileを使い始めたばかりですので、ご容赦ください。アイテムの価格を右に揃えてリストビューを作成しようとしています（アイテムの説明は左に揃えられています。この部分は正常に機能します）。

インターネットを検索しましたが、役立つものが見つかりません。

これが私のコードです：

<div id="home" data-role="page">
    <div data-role="header">
            <h1>For sale</h1>
    </div>

    <div data-role="content">   
        <ul data-role="listview" data-inset="true" data-filter="false">
            <li><a href="#itemA">A</a></li>   <!-- want to put a right-aligned price in here!-->
            <li><a href="#itemB">B</a></li>
            <li><a href="#itemC">C</a></li>
            <li><a href="#itemD">D</a></li>
            <li><a href="#itemE">E</a></li>
        </ul>
    </div>
</div>
4

4 に答える 4

2

別のアイデア: 2 列のグリッドを追加できます。こちらを参照してくださいhttp://jquerymobile.com/test/docs/content/content-grids.html

2 列グリッド

2 列 (50/50%) のレイアウトを作成するには、ui-grid-a のクラスを持つコンテナーから開始し、最初の列の ui-block-a と ui-block でクラス化された 2 つの子コンテナーをその中に追加します。 2 番目の -b:

<div class="ui-grid-a">
    <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
    <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div><!-- /grid-a -->

グリッド クラスは任意のコンテナに適用できます

于 2012-10-31T20:22:49.000 に答える
1

ドキュメントのこのページに表示されているカウント バブルのようなものを探しているかもしれません。カウントを価格に置き換えることができます。

ドキュメントには次のように記載されています。

リスト項目の右側にカウント インジケーターを追加するには、次のクラスの要素で数値をラップします。ui-li-count

于 2012-10-31T00:24:19.720 に答える
1

ここで説明されているように、CSS をオーバーライドできます

テーマのオーバーライド

テーマは確かな出発点として意図されていますが、カスタマイズすることを意図しています。すべてが CSS によって制御されるため、Web インスペクター ツールを使用して、変更するスタイル プロパティを簡単に特定できます。

あなたの場合、これを追加します

 <style>
 .ui-page .ui-content .ui-listview .ui-li {
   text-align: right;
 }
 </style>

そして、あなたはこの結果を得るでしょう
ここに画像の説明を入力

編集：私はちょうどあなたの質問を読み直しました.左側に説明があり、右側に価格だけがあるのが好きです.おそらくジェフのアドバイスに従うべきです...

于 2012-10-31T01:21:19.900 に答える