html - 在列表组中的徽章右侧添加箭头

Question

我正在尝试在列表组中添加一个箭头图标（来自 font-awsome）。问题是它显示在徽章的左侧而不是右侧。我该如何解决？

例子：

我的 HTML（使用 Bootstrap）：

   <ul class="list-group">
        <li class="list-group-item">Friends
            <span class="badge">0</span>
            <span class="icon-angle-right pull-right"></span>
        </li>
        <li class="list-group-item">Items
            <span class="badge">0</span> 
        </li>
    </ul>

Answer 1

默认情况下，它.badge是向右浮动的，因此您需要更改元素的顺序：

<li class="list-group-item">Friends
    <span class="icon-angle-right pull-right"></span>
    <span class="badge">0</span>
</li>

演示小提琴