如何使用以下格式创建列表？

Question

任何人都可以帮我如何使用以下格式创建列表，我不需要符号，但我需要右上角的计数和左下角的文本。

代码：

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

截图：

Answer 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

Answer 2

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

CSS：

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

HTML：

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

Answer 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;
}