Как остановить перемещение текста на панели навигации вверх и вниз при изменении размера окна - PullRequest
Новая
       7

Как остановить перемещение текста на панели навигации вверх и вниз при изменении размера окна

0 голосов
/ 13 октября 2019

Как видно из заголовка, текст в моей панели навигации перемещается вверх и вниз при горизонтальном изменении размера окна. Я пытался и пытался, но я не могу найти решение, я пытался использовать положение, вертикальное выравнивание и сделать свой логотип-баннер вместе со ссылками в процентном соотношении (но это всегда оставляет меня с массивным баннеромнезависимо от того, что и ссылки на самом деле на указанной высоте. Как я могу это исправить?) Я приложил мои HTML и CSS для справки. Обратите внимание, что я также не могу понять, как избавиться от меню-контейнера, не испортив все. Было бы замечательно, если бы кто-то мог также обрисовать в общих чертах то, что у меня здесь, что совершенно не нужно. Я прошу прощения за столь много вопросов, я новичок в этом и следую различным учебным пособиям, как могу. IDK, если это имеет значение, но размеры изображения "goatrockbanner.png" 2000pxx467px. Высота, которая лучше всего подходит для моего рабочего стола, составляет около 60 пикселей. Помощь очень ценится. 

   <div class='menu-container'>
     <div class='menu'>
       <img class='logobanner' src='files/images/goatrockbanner.png'/>
       <div class='links'>
         <a href='games.html' class="button">Games</a>
         <a href='news.html' class="button">News</a>
         <a href='#forums' class="button">Forums</a>
         <a href='contact.html' class="button">Contact Us</a>
       </div>
     </div>
   </div>
 </body>

.menu-container {
  color: #efefef;
  background-color: #000000;
  display: flex;
  flex-wrap: nowrap;
  position: fixed;
}

.menu {
  width: 100%;
  height: 3%;
  display: flex;
  justify-content: left;
  font-size: 140%;
}

.logobanner {
  height: 60px;
  display: flex;
  flex-shrink: 0;
}

.links {
  width: 87.5%;
  height: 60px;
  text-align: center;
  float: left;
  white-space: nowrap;
  justify-content: space-between;
  display: flex;
  flex-wrap: nowrap;
}

.button {
  height: 100%;
  background-color: #000000;
  color: #efefef;
  transition: 0.3s;
  text-align: center;
  padding-top: 0.8%;
  padding-bottom: 0.8%;
  padding-left: 5%;
  padding-right: 5%;
  vertical-align: middle;
  text-decoration: none;
  display: inline-block;
  font-size: 140%;
  flex: 1;
  flex-grow: 1;
}
.button:hover {
  height: 100%;
  background-color: #4e4e4e;
  color: #efefef;
  flex: 1;
  cursor: pointer;
}

1 Ответ

0 голосов
/ 13 октября 2019

Это проблема padding для элемента .button с использованием значения %. Если вы новичок в CSS, вы должны прочитать о units в CSS, и я бы сказал, что % является наиболее проблематичным, поскольку он использует родителя для своих расчетов. Попробуйте использовать px и посмотрите, решит ли это проблему. Подробнее о единицах

...