0

Как сделать, чтобы блоки не «плясали» при анимации увеличения текста?

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #fff;
}

body {
  background-color: #DEDEDE;
}

.wrapper {
  position: relative;
  outline: 1px solid red;
  margin: 0 auto;
  width: 1200px;
  min-height: 800px;
  background-color: #A1A1A1;
}

.header {
  width: 100%;
  height: 85px;
  background-color: #3641E7;
}

.nav {
  height: 20px;
  padding: 10px;
  text-align: center;
}

li {
  outline: 1px solid red;
  margin: 10px;
  width: 100px;
  height: 25px;
  list-style-type: none;
  display: inline-block;
}

a {
  font-size: 16px;
}

a:hover {
  font-size: 18px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Practic-2</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="practic2.css">
  <link rel="stylesheet" type="text/css" href="practic2-media-query.css">
</head>

<body>
  <div class="wrapper">
    <header class="header">
      <nav class="nav">
        <ul>
          <li><a href="#">Главная</a></li>
          <li><a href="#">Новости</a></li>
          <li><a href="#">Сообщество</a></li>
          <li><a href="#">Помощь</a></li>
        </ul>
      </nav>
    </header>
</body>

</html>

2 ответа 2

2

Тогда добавьте свойство vertical-align элементу списка:

li {
  outline: 1px solid red;
  margin: 10px;
  width: 100px;
  height: 25px;
  list-style-type: none;
  display: inline-block;

  vertical-align: top;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #fff;
}

body {
  background-color: #DEDEDE;
}

.wrapper {
  position: relative;
  outline: 1px solid red;
  margin: 0 auto;
  width: 1200px;
  min-height: 800px;
  background-color: #A1A1A1;
}

.header {
  width: 100%;
  height: 85px;
  background-color: #3641E7;
}

.nav {
  height: 20px;
  padding: 10px;
  text-align: center;
}

li {
  outline: 1px solid red;
  margin: 10px;
  width: 100px;
  height: 25px;
  list-style-type: none;
  display: inline-block;
  vertical-align: top;
}

a {
  font-size: 16px;
}

a:hover {
  font-size: 18px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Practic-2</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="practic2.css">
  <link rel="stylesheet" type="text/css" href="practic2-media-query.css">
</head>

<body>
  <div class="wrapper">
    <header class="header">
      <nav class="nav">
        <ul>
          <li><a href="#">Главная</a></li>
          <li><a href="#">Новости</a></li>
          <li><a href="#">Сообщество</a></li>
          <li><a href="#">Помощь</a></li>
        </ul>
      </nav>
    </header>
</body>

</html>

5
  • И чем это мне поможет? Мне нужно, чтобы блоки не плясали, когда на них наводишь мышкой, а не плавную анимацию сделать.
    – Markva
    22 июл 2019 в 9:47
  • @Markva, может тогда и вопросе стоит это написать?
    – eanmos
    22 июл 2019 в 9:48
  • Извиняюсь, я думал проблема очевидна..
    – Markva
    22 июл 2019 в 9:49
  • @Markva, обновил ответ.
    – eanmos
    22 июл 2019 в 9:51
  • Спасибо за быстрый ответ.
    – Markva
    22 июл 2019 в 9:54
2
a {
  display: inline-block;
  line-height: 25px;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #fff;
  display: inline-block;
  line-height: 25px;
}

body {
  background-color: #DEDEDE;
}

.wrapper {
  position: relative;
  outline: 1px solid red;
  margin: 0 auto;
  width: 1200px;
  min-height: 800px;
  background-color: #A1A1A1;
}

.header {
  width: 100%;
  height: 85px;
  background-color: #3641E7;
}

.nav {
  height: 20px;
  padding: 10px;
  text-align: center;
}

li {
  outline: 1px solid red;
  margin: 10px;
  width: 100px;
  height: 25px;
  list-style-type: none;
  display: inline-block;
}

a {
  font-size: 16px;
}

a:hover {
  font-size: 18px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Practic-2</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="practic2.css">
  <link rel="stylesheet" type="text/css" href="practic2-media-query.css">
</head>

<body>
  <div class="wrapper">
    <header class="header">
      <nav class="nav">
        <ul>
          <li><a href="#">Главная</a></li>
          <li><a href="#">Новости</a></li>
          <li><a href="#">Сообщество</a></li>
          <li><a href="#">Помощь</a></li>
        </ul>
      </nav>
    </header>
</body>

</html>

Ваш ответ

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

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