Как позиционировать вправо и иметь элементы ниже одного и другого в CSS - PullRequest
Новая
       40

Как позиционировать вправо и иметь элементы ниже одного и другого в CSS

0 голосов
/ 27 сентября 2019

Я пытаюсь расположить социальные иконки на моем сайте.В идеале, с правой стороны, закрепленной посередине.

Моя проблема в том, что лучшее, что я могу из этого получить, - это когда они друг над другом, а не снизу.Я пытался просто установить поля, 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>

Мне бы хотелось, чтобы каждая иконка находилась справа, посередине, друг под другом.Прямо сейчас они друг на друга.Спасибо

1 Ответ

1 голос
/ 27 сентября 2019

Да, вам нужно position: fixed к разделу, и позволить остальным работать самостоятельно.

А также вам нужно изменить .section на section на вашем CSS.

Это может помочь 

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