jQuery移动列表视图 - 在右侧添加一些文本

Question

我刚开始使用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>

Answer 1

另一个想法：您可以添加2列网格，请参阅此处http://jquerymobile.com/test/docs/content/content-grids.html

  

两列网格

     

要构建一个双列（50/50％）布局，请从带有a的容器开始   ui-grid-a类，并在其中添加两个子容器   第一列是ui-block-a，第二列是ui-block-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 -->

     

网格类可以应用于任何容器

Answer 2

您可能正在寻找计数气泡等内容，这些气泡会显示在文档的this page上。您可以用价格替换计数。

documentation州：

  

要在列表项的右侧添加计数指示器，请将该数字包装在类ui-li-count

的元素中

Answer 3

您可以按照here

所述覆盖CSS

  

覆盖主题

     

主题是一个坚实的起点，但意味着   定制。由于一切都是由CSS控制的，因此很容易使用   Web检查器工具，用于标识所需的样式属性   修改

在您的情况下添加此

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

你会得到这个结果

编辑：我只是重新阅读你的问题，你喜欢左边的描述，只有右边的价格，可能你应该按照杰夫的建议然后......

Answer 4

我在documentation找到了解决方案。

您可以在li元素中使用此类内容：

<p class="ui-li-aside ui-li-desc"><strong>2.75</strong></p>