css - 如何使用jquery mobile将文本与同一行对齐？

Question

我正在使用 jquery mobile，我对如何应用 css 有疑问。我有下面的图片，我希望 10 美元与其他文本在同一行，除了向右对齐。

我习惯于 twitter bootstrap，我会将所有文本放在同一行，然后将内容放在不同的 span 中（也许是 span10 和 span2）。关于如何使用 jquery mobile 执行此操作的任何建议？

代码：

        <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="a" style="white-space:normal"> 
            <a class="changePageButton" data-transition="slide">

            <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-c ui-corner-top"><h2>Himalayan Flavors<small> (0.5 mi)</small></h2>
              <span style="float:right"><label for="province">$10</label></span>
              <right><p>$40 for $20</p></right></li> 

            <li class="custom_listview_img" style = "background-image:url('http://c.yipitcdn.com/thumbor/SOWRPRFYvkagojw-sA_VPeSKK_k=/408x357/smart/c.yipitcdn.com/deal/20-to-spend-on-food-and-drink-3761-1374483321.jpg');"></li>
        </a>
        </ul>

    <style>
        .custom_listview_img {
            margin:0px; 
            padding:0px;
            background-repeat:no-repeat;
            background-size:100%;
            height:150px;
        }
    </style>

Answer 1

如果您使用的是 jquery mobile，则可以使用

 <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="a" style="white-space:normal">
   <a class="changePageButton" data-transition="slide">
   <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-c ui-corner-top">
        <h2>Himalayan Flavors<small> (0.5 mi)</small></h2>
             <p class="ui-li-aside"><strong>$10</strong>PM</p>
             <p>$40 for $20</p>
   </li> 

 </a>    
</ul>

http://jsfiddle.net/4ZbnZ/