1

Требуется разместить иконки как на скрине

Da

Net

Расстояние между иконками 12px, справа и слева от обозначенных границ одинаковое расстояние

Пытался сделать через justify-content: space-evenly/space-around, но тогда если количество иконок будет 3, то расстояние между ними будет НЕ 12px

Догадываюсь, что нужно решать через псевдо-элементы или тп., но пока что даже не знаю с чего начать

1 ответ 1

1

Для современных браузеров:

p {
  display: flex;
  gap: 12px;
  justify-content: center;
  outline: 1px dotted red;
}

i {
  width: 32px;
  height: 32px;
  background: silver;
  border-radius: 50%;
}
<p><i></i>
<p><i></i><i></i>
<p><i></i><i></i><i></i>
<p><i></i><i></i><i></i><i></i>
<p><i></i><i></i><i></i><i></i><i></i>

Чуть постарее:

p {
  display: flex;
  justify-content: center;
  outline: 1px dotted red;
}

i {
  width: 32px;
  height: 32px;
  background: silver;
  border-radius: 50%;
}

i + i {
  margin-left: 12px;
}
<p><i></i>
<p><i></i><i></i>
<p><i></i><i></i><i></i>
<p><i></i><i></i><i></i><i></i>
<p><i></i><i></i><i></i><i></i><i></i>

Совсем старых:

p {
  text-align: center;
  outline: 1px dotted red;
}

i {
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  background: silver;
  border-radius: 50%;
}

i + i {
  margin-left: 12px;
}
<p><i></i>
<p><i></i><i></i>
<p><i></i><i></i><i></i>
<p><i></i><i></i><i></i><i></i>
<p><i></i><i></i><i></i><i></i><i></i>

1
  • Спасибо, помогло. Было глупо с моей стороны забывать про gap и говорить про псевдо-селекторы
    – Bumbazzz
    26 июл 2022 в 11:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.