用<ul><li>实现任务的时候，怎么把徽章右对齐

<div style="width:70%">

    <ul class="list-group">

        <li class="list-group-item"><a href="#" style="display:block">性能优化之PHP优化<span class="badge">23</span></a></li>

        <li class="list-group-item"><a href="#" style="display:block">Canvas绘图详解<span class="badge">34</span></a></li>

        <li class="list-group-item"><a href="#" style="display:block">玩转Bootstrap<span class="badge">5</span></a></li>

        <li class="list-group-item"><a href="#" style="display:block">基于Bootstrap的网页开发<span class="badge">13</span></a></li>

    </ul>

</div>

这样做出来的徽章会跟在link后面，怎么让它右对齐又是可点击区域的