html - 如何在 CSS 中向右定位并在一个和另一个下方放置元素

Question

我正在尝试在我的网站上放置社交图标。理想情况下，在右侧，固定在中间。

我的问题是，我能得到的最好的结果是当它们在彼此之上而不是在下面时。 我尝试只设置边距、flexbox、固定定位，但我没有找到正确的设置组合。

.section #icon-bar {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-family: 'Raleway DOts', sans-serif;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

section #icon-bar li {
  position: fixed;
  align-items: center;
  display: block;
  right: 10px;
  top: 50%;
  width: 60px;
  height: 70px;
  margin: 30px;
  list-style: none;
}

section #icon-bar li div {
  width: 120px;
  height: 120px;
  color: #74d4b3;
  font-size: 3.4em;
  text-align: center;
  line-height: 120px;
  background-color: #fff;
  transition: all 0.5s ease;
}

<section>
  <ul id="icon-bar">
    <li>
      <div class="facebook">
        <a href="https://www.facebook.com/>
          <i class=" fa fa-facebook " aria-hidden="true "></i>
        </a>
      </div>
      <span>Facebook</span>
    </li>
    <li>
      <div class="linkedin ">
        <a href="https://www.linkedin.com/ ">
          <i class="fa fa-linkedin " aria-hidden="true "></i>
        </a>
      </div>
      <span>LinkedIn</span>
    </li>
    <li>
      <div class="github ">
        <a href="https://github.com/ ">
          <i class="fa fa-github " aria-hidden="true "></i>
        </a>
      </div>
      <span>Github</span>
    </li>
  </ul>
</section>

我希望每个图标都在右侧、中间、彼此下方。现在，他们在彼此之上。 谢谢

Answer 1

是的，您需要将 position: fixed 到该部分，让其他部分自行处理。

而且你还需要在你的 css 上将 .section 更改为 section。

这可能有帮助

section{
  position: fixed;
  right: 0;
  height: 100vh;
}

section #icon-bar{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Raleway DOts', sans-serif;
  height: 100%;
}

section #icon-bar li {
  text-align: center;
  display:block;
  width: 80px;
  list-style: none;
  margin-bottom: 20px;
}
section #icon-bar li div {
  width: 80px;
  height: 60px;
  color: #74d4b3;
  font-size: 3em;
  background-color: #fff;
  transition: all 0.5s ease;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<section>
  <ul id="icon-bar">
    <li>
      <div class="facebook">
        <a href="https://www.facebook.com/">
          <i class="fa fa-facebook" aria-hidden="true"></i>
        </a>
      </div>
      <span>Facebook</span>
    </li>
    <li>
      <div class="linkedin">
        <a href="https://www.linkedin.com/">
          <i class="fa fa-linkedin" aria-hidden="true"></i>
        </a>
      </div>
      <span>LinkedIn</span>
    </li>
    <li>
      <div class="github">
        <a href="https://github.com/">
          <i class="fa fa-github" aria-hidden="true"></i>
        </a>
      </div>
      <span>Github</span>
    </li>
  </ul>
</section>