如何在CSS中向右定位并使项目低于一个和另一个答案

【问题标题】：How to position to right and have items below one and other in CSS如何在CSS中向右定位并使项目低于一个和另一个
【发布时间】：2020-01-27 15:53:28
【问题描述】：

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

我的问题是，我能从中得到的最好的结果就是当它们在彼此之上而不是在下方时。我尝试只设置边距、弹性框、固定定位，但我没有找到合适的设置组合。

.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>

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

【问题讨论】：

我首先从li 中删除position: fixed;
可能是display:inline-block; 或float:right
谢谢你，那么他们在彼此之下，但在错误的一边。但这是一个非常好的观点，谢谢
@Stender 谢谢，这两者都导致它们彼此相邻，不再低于。所以浮动到右侧，但它们水平相邻。或与 inline-block 相同，但在左侧。谢谢
啊，我以为你想让它们挨着 :-D

标签： html css flexbox css-position

【解决方案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>

【讨论】：