БЛОГ НА HUSL


Как решить классическую проблему размещения двух элементов в один ряд в html / css

Автор вопроса: Mezamorta

Приветствую вас уважаемые граждане stack overflow. У меня проблема с размещением двух элементов в ряд(смотрите фрагмент кода ниже). Я буду благодарен за любую помощь или совет.

Конечный результат должен быть такой: введите сюда описание изображения

А мои потуги привели к этому:

Что иконка соц.сети, что описание, должно работать синхронно как одно целое. Однако их нужно разделить, чтоб позже можно было отключить текст(display: none) и оставить только иконку. Вот так: введите сюда описание изображения

Вариант с

.social__icon {
  display: inline-flex; 
  align-items: center;

даёт такой результат: введите сюда описание изображения

ol,
ul,
li,
menu {
  list-style: none;
}

a {
  text-decoration: none;
}

.social__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social__icon {
  display: inline-block;
  text-align: center;
  width: 26px;
  height: 26px;
  border-radius: 100%;
  background: rgba(196, 196, 196, 0.5);
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  -ms-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.social__icon img {
  vertical-align: middle;
}

.social__icon span {}

.social__icon:active {
  background: #4B9200;
  color: #4B9200;
}

.social__icon:hover {
  animation: shake 500ms ease-in-out forwards;
}

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
<div class="social">
  <ul class="social__list">
    <li>
      <a class="social__icon" href="https://en-gb.facebook.com" target="_blank" rel="noopener">
        <img src="../../assets/icons/social/fb.svg" alt="">
        <span>Facebook</span>
      </a>

    </li>
    <li>
      <a class="social__icon" href="https://twitter.com" target="_blank" rel="noopener">
        <img src="../../assets/icons/social/twtr.svg" alt="">
        <span>Twitter</span>
      </a>
    </li>
    <li>
      <a class="social__icon" href="https://www.instagram.com" target="_blank" rel="noopener">
        <img src="../../assets/icons/social/inst.svg" alt="">
        <span>Instagram</span>
      </a>
    </li>
    <li>
      <a class="social__icon" href="https://www.youtube.com" target="_blank" rel="noopener">
        <img src="../../assets/icons/social/youtube.svg" alt="">
        <span>Youtube</span>
      </a>
    </li>
  </ul>
</div>


Источник

Ответы (4 шт):

Автор решения: ΝNL993

Что-то типа такого?

ol,
ul,
li,
menu {
  list-style: none;
}

a {
  text-decoration: none;
}

.social__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social__icon {
  display: flex;
  text-align: center;
  width: 26px;
  height: 26px;
  border-radius: 100%;
  background: rgba(196, 196, 196, 0.5);
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  -ms-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.social__icon img {
  vertical-align: middle;
}

.social__icon :where(img, span) {
  margin-left: 5px;
}

.social__icon:active {
  background: #4B9200;
  color: #4B9200;
}

.social__icon:hover {
  animation: shake 500ms ease-in-out forwards;
}

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
<div class="social">
  <ul class="social__list">
    <li>
      <a class="social__icon" href="https://en-gb.facebook.com" target="_blank" rel="noopener">
        <img src="https://icons.getbootstrap.com/assets/icons/facebook.svg" alt="">
        <span>Facebook</span>
      </a>
    </li>
    <li>
      <a class="social__icon" href="https://twitter.com" target="_blank" rel="noopener">
        <img src="https://icons.getbootstrap.com/assets/icons/twitter.svg" alt="">
        <span>Twitter</span>
      </a>
    </li>
    <li>
      <a class="social__icon" href="https://www.instagram.com" target="_blank" rel="noopener">
        <img src="https://icons.getbootstrap.com/assets/icons/instagram.svg" alt="">
        <span>Instagram</span>
      </a>
    </li>
    <li>
      <a class="social__icon" href="https://www.youtube.com" target="_blank" rel="noopener">
        <img src="https://icons.getbootstrap.com/assets/icons/youtube.svg" alt="">
        <span>Youtube</span>
      </a>
    </li>
  </ul>
</div>

Если вас интересует конкретно решение, то вот:

.social__icon :where(img, span) {
  margin-left: 5px;
}

Про псевдокласс :where - на MDN

→ Ссылка
Автор решения: EkaterinaRatatui 

ol,
ul,
li,
menu {
  list-style: none;
}


.social__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social__wrap-img {
 width: 26px;
  height: 26px;
  border-radius: 100%;
  background: rgba(196, 196, 196, 0.5);
}

.social__icon {
  display: flex;
  align-items: center;
  text-align: center;
}

.social__icon img {
  vertical-align: middle;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.social__icon span {}

.social__icon:active {
  background: #4B9200;
  color: #4B9200;
}

span {
margin-left: 5px;
-webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  -ms-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
  }

.social__icon:hover span {
  animation: shake 500ms ease-in-out forwards;
}

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
<div class="social">
  <ul class="social__list">
    <li>
      <a class="social__icon" href="https://en-gb.facebook.com" target="_blank" rel="noopener">
      <div class="social__wrap-img">
          <img src="../../assets/icons/social/fb.svg" alt="">
         </div>
        <span>Facebook</span>
      </a>

    </li>
  </ul>
</div>

→ Ссылка
Автор решения: puffleeck
  1. с нэймингом классов у вас было всё грустно, поправил
  2. габариты (width & height 26px) были применены к <a> вместо <img> из-за кривого нейминга. с border-radius и фоном та же беда.

ol,
ul,
li,
menu {list-style: none;}
a {text-decoration: none;}
.social__ancor {}
.social__link:hover {animation: shake 500ms ease-in-out forwards;}

.social__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social__icon {
  vertical-align: middle;
  width: 26px;
  height: 26px;
  border-radius: 100%;
  background: rgba(196, 196, 196, 0.5);
}

.social__link {
  display: inline-block;
  text-align: center;
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  -ms-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.social__link:active .social__ancor,
.social__link:active .social__icon{
  background: #4B9200;
  color: #4B9200;
}

@keyframes shake {
  0% {transform: rotate(2deg);}
  50% {transform: rotate(-3deg);}
  70% {transform: rotate(3deg);}
  100% {transform: rotate(0deg);}
}
<div class="social">
  <ul class="social__list">
    <li>
      <a class="social__link" href="https://en-gb.facebook.com" target="_blank" rel="noopener">
        <img class="social__icon" src="../../assets/icons/social/fb.svg" alt="" />
        <span class="social__ancor">Facebook</span>
      </a>

    </li>
    <li>
      <a class="social__link" href="https://twitter.com" target="_blank" rel="noopener">
        <img class="social__icon" src="../../assets/icons/social/twtr.svg" alt="" />
        <span class="social__ancor">Twitter</span>
      </a>
    </li>
    <li>
      <a class="social__link" href="https://www.instagram.com" target="_blank" rel="noopener">
        <img class="social__icon" src="../../assets/icons/social/inst.svg" alt="" />
        <span class="social__ancor">Instagram</span>
      </a>
    </li>
    <li>
      <a class="social__link" href="https://www.youtube.com" target="_blank" rel="noopener">
        <img class="social__icon" src="../../assets/icons/social/youtube.svg" alt="" />
        <span class="social__ancor">Youtube</span>
      </a>
    </li>
  </ul>
</div>

→ Ссылка
Автор решения: Cront

Ребята выше написали решение, но что бы понять надо оценить сам макет (схематично отобразил задачу) введите сюда описание изображения

Есть куча способов как расположить элементы друг под другом, но мы остановимся на флексах

(Красный)Первое что нужно сделать это расположить их друг под другом(display:flex; flex-direction: column;), элементы у нас теперь в столбик

(Зеленый) Идем глубже у нас есть блок и текст, условно мы знаем что иконка блок с иконкой занимает место в этом блоке, что бы далеко не ходить мы иконку выравниваем и под блок в котором иконка оставляем место (flex: 0 0 2rem; max-width: 2rem; display: flex; justify-content: center; align-items: center;)

(Оранжевый) Мы хотим что бы элементы не "слипались" реализуем им пространство (.elem+.elem{ margin-top: твое расстояние;})

Дальше уже дело кастомизации элементов, мы сейчас разобрали почему и как

→ Ссылка

licensed under cc by-sa 3.0 with attribution.