在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):

我想做的是“排列”图标，使它们出现在右边，而不管标签中链接的长度如何。我已经在Fireworks中模拟了这个过程，但它展示了我想做的事情的思路：

这怎么可能呢？我也在使用Bootstrap 3.3.7，但不确定其中是否有任何实用工具或类可供使用。

我尝试在 <a> 元素上设置宽度，但显然这非常限制且响应性不佳。

- Andy

---

简单来说，使用Bootstrap的pull-right类，将其应用于<i>标签上，就像这样：<i class='fa fa-code pull-right'></i>。 - Matheus Cuba

Answer 1

一种Flexbox方法：

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>

- sol

---

多么优雅的解决方案！不需要搞乱 float: right，也不需要处理高度和垂直对齐问题。 - Ralph Bolton

Answer 2

只需使用浮动即可

li i {
  float : right; 
}

或者您可以像这样使用Bootstrap类push-right

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

- Muhammed Albarmavi

Answer 3

你可以检查我的代码片段：

ul {
  width: 200px;
}

.float-right {
  float: right;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
    <li><a href="#">Link 1</a> <i class="fa fa fa-chevron-right float-right"></i></li>
    <li><a href="#">Link 2 is longer</a> <i class="fa fa fa-chevron-right float-right"></i></li>
    <li><a href="#">Link 3</a> <i class="fa fa fa-chevron-right float-right"></i></li>
</ul>

- Quoc-Anh Nguyen

---

浮动元素可以使用，但是它不会按照CSS顺序流动，因此它不会拉伸div的高度，也无法完全正确地垂直对齐。 - Ralph Bolton

Answer 4

你可以使用以下CSS - 它是相对位置与固定宽度的组合，用于li，并且绝对定位，右对齐，用于i标记：

li { 
width: 130px; 
  position: relative;
}
li i {
  position: absolute;
  right: 0;
  bottom: 1px;
}

https://jsfiddle.net/z9hcub4w/1/

- Johannes

Answer 5

如果使用i元素的float right，给li元素设置宽度怎么样？

  i {
        float: right;
    }


 li {
    width: 12em;

   }

- Dream_Cap