如何将 Font Awesome 图标右对齐？

Question

我正在尝试 text-align: right 在我的 CSS 中，但文本对齐由于某种原因没有移动它。我希望网站标题左对齐，图标右对齐在同一行上。这就是我正在尝试的。

JS小提琴

HTML

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="top-container">
    <h2>Website Title</h2>

    <i class="fas fa-bars"></i>
</div>

CSS

 body {
  margin: 0;
}

.top-container {
    padding: 20px;
    margin: 0;
    width: 100%;
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.75);
    font-size: 2em;
    font-weight: bold;
}

.top-container i {
    color: red;
    display: inline-block;
    text-align: right;
}

.top-container h2 {
    display: inline-block;
}

h2 {
  margin-top: 10px;
}

原文由 Brandon LearnsAlot 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

text-align 将在您分配给它的元素 内 对齐文本，这在 inline-block 元素中没有任何作用--- 像这样的元素（因为它和它的内容一样宽）。使用 float: right; 代替 text-align: right

https://jsfiddle.net/s4a9sct9/1/

原文由 Johannes 发布，翻译遵循 CC BY-SA 4.0 许可协议