如何创建具有以下格式的列表？ [关闭]答案

【问题标题】：How to create a list with following format? [closed]如何创建具有以下格式的列表？ [关闭]
【发布时间】：2014-07-01 11:34:24
【问题描述】：

谁能帮助我如何创建具有以下格式的列表，我不需要符号，但我需要右上角的计数和左角的文本。

代码：

  <ul data-role="listview" id="locationList">
     <li>premo1 60</li>
     <li>premo2 100</li>
     <li>premo3 150</a></li>                            
    </ul>

截图：

【问题讨论】：

标签： jquery html css jquery-ui jquery-mobile

【解决方案1】：

如果您使用的是 jQuery Mobile，则有内置类用于在右侧显示计数（ui-li-count）：

<ul data-role="listview" data-count-theme="a" data-inset="false">
    <li><p>Inbox <span class="ui-li-count">12</span></p></li>
    <li><p>Outbox <span class="ui-li-count">0</span></p></li>
    <li><p>Drafts <span class="ui-li-count">4</span></p></li>
    <li><p>Sent <span class="ui-li-count">328</span></p></li>
    <li><p>Trash <span class="ui-li-count">62</span></p></li>
</ul>

如果你想去掉计数周围的边框，添加这个 CSS：

.ui-li-count {
    border: 0;
}

这是一个DEMO

【讨论】：

简单，欢迎回来；）
@Omar，谢谢，我想我还在度假:)

【解决方案2】：

使用float 属性将您的元素设置为左右，如下所示：

CSS：

.left {float:left;}
.right {float:right;}

HTML：

<li>
    <div class="left">premo1</div>
    <div class="right">60</div>
</li>

【讨论】：

什么不来？检查这个jsfiddle.net/3eC3w/1
jsfiddle.net/3eC3w/2 - 我只是对 ul 的宽度添加了约束，使它看起来稍微好一些。否则示例是正确的。
我没有给你投反对票。我接受了你的回答

【解决方案3】：

在这种情况下，不需要对float 属性进行不必要的使用。如图所示，只需使用 float:right 即可实现布局。检查 DEMO。

CSS 代码

ul#locationList{padding:0 margin:0; overflow:hidden;}

ul#locationList li{ list-style-type:none; border-top:1px solid gray; padding:10px;}

ul#locationList li:last-child{ list-style-type:none; border-bottom:5px solid gray; padding:10px;

}

ul#locationList li a
{float:right;display:inline-block;
  text-decoration:none;
}

ul#locationList li a:after
{
 content: "\f004"; 
 font-family: FontAwesome;
 font-style: normal;
 font-weight: normal;
 text-decoration: none;
 color: #ef8913;
 font-size: 15px;
 margin:0 10px;
}

【讨论】：