jquery - jQuery mobile listview - 在右侧添加一些文本

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%) 的布局，从一个类为 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

I found the solution on the documentation.

You can use something like this within your li element:

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

Answer 3

you can override the CSS as described here

Overriding themes

The themes are meant as a solid starting point, but are meant to be customized. Since everything is controlled by CSS, it's easy to use a web inspector tool to identify the style properties you want to modify.

in your case add this

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

and you will get this result

EDIT: I just reread your question, you like to have the description on the left and only the price on the right, probably you should follow the advice of Jeff then...

Answer 4

您可能正在寻找类似计数气泡的内容，这些内容显示在文档的此页面上。您可以用价格替换计数。

该文档指出：

要在列表项的右侧添加计数指示符，请将数字包装在具有类的元素中ui-li-count