html - 栏中的图标太低

Question

我有一个简单的网站 (tristantrouwen.com)。它的顶部有一个栏，上面有 3 个图标。其中1个需要留下。其他两个对。但是右边的两个图标比左边的低。

html:

<div class="icon-menu">
  <div class="click"><i class="material-icons md-36">menu</i></div>
  <div data-toggle="modal" data-target="#loginModal" aria-hidden="true"><i class="material-icons md-36 icons-right">exit_to_app</i></div>
  <div data-toggel="modal" data-target="#signUpModal" aria-hidden="true"><i class="material-icons md-36 icons-right">person_add</i></div>
</div>

CSS:

.icons-right {
  float: right;
}

问题是:

我想听听如何让这些图标更高一些。

Answer 1

您需要先列出 float 的 div:

<div>
    <div class="icons-right">...</div>
    <div class="icons-right">...</div>
    <div>...stuff on the left</div>
</div>

如果您将它们放在“左”内容之后，它们将在“左”div 完成后向右浮动。将它们放在 DOM 中的第一位会使它们 float 到那个“左”div 的开始 的右侧，这是它的上边缘。