Как сделать горизонтальную панель иконок с HTML

Question

Я пытаюсь сделать горизонтальную панель иконок с HTML. Я использую следующий код, и на 100% это нормально, но с Firefox, если я уменьшу три раза, последний «значок» переходит в новую строку.

Как мне это исправить?

.icon-bar {
  z-index: 9999999999;
  width: 336px;
  background-color: #EFEFEF;
  overflow: auto;
  /* Overflow due to float */
}

.icon-bar a {
  float: left;
  /* Float links side by side */
  text-align: center;
  /* Center-align text */
  width: 13.6%;
  /* Equal width */
  padding: 6px 0;
  /* Some top and bottom padding */
  transition: all 0.3s ease;
  /* Add transition for hover effects */
  color: navy;
  border-left: 1px solid navy;
  border-right: 1px solid navy;
  font-size: 20px;
}

<div class="icon-bar">
  <a href="#">A</a>
  <a href="#">B</a>
  <a href="#">C</a>
  <a href="#">D</a>
  <a href="#">E</a>
  <a href="#">F</a>
  <a href="#">G</a>
</div>

Answer 1

Это просто связано с тем, что он не реагирует. Вы должны использовать Media Queries, чтобы изменить ширину .icon-bar.

Вот пример медиазапроса:

/* Set the background color of body to tan */
body {
  background-color: tan;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

Подробнее о запросах можно прочитать здесь: Медиа-запросы