2

Хочу создать аналогичное меню с иконками от fontawesome
Сделал я все через div. Единственная проблема которая у меня создалась это ширина каждого div-а.

Как мне сделать чтобы каждая иконка стояла так ровно по ширине разных экранов устройств.

Попробовал задать ширину div-ов процентами. Через комп ширина норм, а через телефон за экран лезет одна иконка.

Instagram

2 ответа 2

1

Можно сделать при помощи display: grid;.

body {margin: 10px;}

/* Для наглядности */
.resize {
  min-width: 180px; /* Увы, это минималка, дальше не "сожмёшь" */
  width: 50%;
  height: 50px;
  resize: horizontal;
  overflow: auto;
}
/* Для наглядности */

.menu {
  display: grid;
  grid-template-columns: repeat(5,1fr); /* 5 дочерних элементов одной ширины */
  grid-gap: 5px; /* Ну и отступ в 5 пикселей */
  width: 100%;
  height: 40px;
  background: #fff;
}

.item {
  display: block;
  width: 100%;
  height: 40px;
  /* Так же стилизируем, для наглядности */
  background: #999;
  border-radius: 5px;
}

/* Типо иконки, статичного размера 30x30px */
.icon {
  display: block;
  width: 30px;
  height: 30px;
  background: #333;
  margin: 5px auto;
  /* Т.к. высота родителя 40px, а высота дочернего 30px, то делаем отступ 5px (вверх + вниз = 10px той самой разницы). Влево и вправо - автоматически */
}
<div class="resize">
  <div class="menu">
    <div class="item">
      <div class="icon"></div>
    </div>
    <div class="item">
      <div class="icon"></div>
    </div>
    <div class="item">
      <div class="icon"></div>
    </div>
    <div class="item">
      <div class="icon"></div>
    </div>
    <div class="item">
      <div class="icon"></div>
    </div>
  </div>
</div>

0
1

Все, смог решить.

HTML:

<div id="menu">
<div><a href=""><i class="fa fa-home fa-2x" aria-hidden="true"></i> </a></div>          
<div><a href=""><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></div>
<div><a href=""><i class="fa fa-plus-square fa-2x" aria-hidden="true"></i></a></div>
<div><a href=""><i class="fa fa-info-circle fa-2x" aria-hidden="true"></i></a></div>
<div><a href=""><i class="fa fa-user fa-2x" aria-hidden="true"></i></a></div>
</div>

CSS:

#menu {
width: 100vw;
bottom: 0;
left: 0;
position: fixed;
background: #dcdcdc;
text-align: center;
}

#menu>div {
display: inline-block;
padding: 10px 0 10px 0;
width: 19vw ;
}

menu

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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