如何在同一行的两侧有图标？

Question

我已经尝试了所有可以找到的答案，似乎无法解决这个问题。我试图让左边的一个按钮和同一行内的另一个按钮。我尝试过使用

<div style="text-align: right;clear:left;"> 

在div或span标签中并将其从无序列表中取出但我似乎仍然无法令人沮丧！我认为我可以通过将它们放在桌子中然后左右浮动来实现它，但这似乎是一种混乱的方式，我确信有一种更简单的方法，我似乎无法找到它。我很乐意为每个分配一个新类，然后为它们分配一些新的CSS，但我似乎无法让它以这种方式工作。

我把我的JSFiddle放在这里：JSFiddle来说明问题。

<span align="right">
  <ul class="actions">
    <li><a href="salary.html" class="button special icon fa-arrow-left">Salary</a></li>
    <li><a href="courses.html" class="button special icon fa-arrow-right">Courses</a></li>
  </ul>
</span>

非常感谢你的帮助，

S上。

Answer 1

删除不必要的跨度，只需使用：

ul.actions li:last-of-type {
  float: right;
}

这使得第一个按钮完全不变，位于左侧，并将第二个按钮浮动到最右侧。