右对齐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）：

我想要做的是＆＃34;排队＆＃34;无论<a>标签中的链接长度如何，它们都会显示在右侧。我在Fireworks中嘲笑过它，但它显示了我想要做的事情：

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

我已经尝试在<a>元素上加宽，但显然这是相当严格的，并且不能很好地响应。

Answer 1

Flexbox方法：

＆＃13;

＆＃13;

ul {
  width: 10em;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需使用float

即可

li i {
  float : right; 
}

或者你可以像这样使用bootstrap class push-right

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

Answer 3

您可以查看我的代码段：

＆＃13;

＆＃13;

ul {
  width: 200px;
}

.float-right {
  float: right;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你可以使用这个CSS - 相对位置与li的固定位置和i标签的右对齐位置的组合：

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

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

Answer 5

如何让li的宽度在i元素上浮动。

  i {
        float: right;
    }


 li {
    width: 12em;

   }