html - 在 li 上右对齐 fontawesome 图标

Question

我有以下标记:

<ul>
    <li><a href="#">Link 1</a> <i class="fa fa fa-chevron-right"></i></li>
    <li><a href="#">Link 2 is longer</a> <i class="fa fa fa-chevron-right"></i></li>
    <li><a href="#">Link 3</a> <i class="fa fa fa-chevron-right"></i></li>
</ul>

它看起来像这样(jsfiddle):

我想做的是“排列”图标，使它们出现在右侧，而不管<a> 中的链接长度如何。标签。我已经在 Fireworks 中对此进行了模拟，但它显示了我正在尝试做的事情的想法:

这怎么可能？我也在使用 Bootstrap 3.3.7，但不确定其中的任何实用程序或类是否有帮助。

我试过在 <a> 上设置宽度元素，但显然这是非常严格的，并且不能很好地响应。

Answer 1

flex 盒方法:

ul {
  width: 10em;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <ul class="fa-ul">
        <li><a href="#">Link 1</a> <i class="fa fa fa-chevron-right"></i></li>
        <li><a href="#">Link 2 is longer</a> <i class="fa fa fa-chevron-right"></i></li>
        <li><a href="#">Link 3</a> <i class="fa fa fa-chevron-right"></i></li>
    </ul>