0

Здраствуйте! Хочу сделать увеличение текста на событие hover, но неожиданно столкнулся с тем, что меню сдвигается влево из-за padding. Подскажите, как сделать, чтобы меню не двигалось, а оставалось на месте. Заранее спасибо)

nav {
  float: right;
}

header ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
}

header li {
  padding-left: 42px;
}

header li a {
  //color: #fff;
  text-transform: uppercase;
  font: 14px/normal Arial;
}

header li a:hover {
  font-size: 15px;
  cursor: pointer;
}
<header class='wrapper'>
  <img src="img/Logo-Treehouse.png" alt="" id="logo">
  <nav>
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">services</a></li>
      <li><a href="#">portfolio</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </nav>
</header>

1 ответ 1

1

Используйте transform

*{
  padding: 0;
  margin: 0;
}
nav {
  float: right;
  background-color: #f9f9f9
}
header {
  background-color: #f9f9f9;
  padding: 1rem;
}

header ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
}

header li {
  padding-left: 42px;
}

header li a {
  //color: #fff;
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  font: 14px/normal Arial;
  transition: transform 200ms;
}

header li a:hover {
  //font-size: 15px;
  cursor: pointer;
  transform: scale(1.2)
}
<header class='wrapper'>
  <img src="img/Logo-Treehouse.png" alt="" id="logo">
  <nav>
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">services</a></li>
      <li><a href="#">portfolio</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </nav>
</header>

Ваш ответ

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

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