Горизонтальное меню: Ширина иконок

210

12 декабря 2018, 02:20

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

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

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

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

Answer 2

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

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 ;
}