导航栏中的图标不保持内联

Question

所以，我不知道发生了什么，但是突然我的图标变成了垂直的。这是代码： CSS：

    .float-right {
  float: right;
  height: inherit;
}

.icons-container {
  margin-right: 1vw;
  position: relative;
  width: 10vw;
}

.icons {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  font-weight: 400;
  width: inherit;

  & a {
    color: $secondary-color;
  }
}

HTML：

<div class="float-right icons-container">
      <span class="icons">
        <a href="#"><i class="flaticon-twitter-logo-button"></i></a>
        <a href="#"><i class="flaticon-github-logo"></i></a>
        <a href="#"><i class="flaticon-instagram-logo"></i></a>
      </span>

    </div>

以下是屏幕截图： Icons one on top another chrome开发工具的屏幕截图： DevTools

Answer 1

您可以使用以下代码水平显示

.icons a {
display: inline-block;
}