0

ul {
  display: inline-flex;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  padding: 14px 10px 21px;
}

li:hover {
  background-color: #a5ffb9;
  border-radius: 150px;
  opacity: 0.9;
  color: black;
  transition-duration: 0.5s;
  font-size: 18px;
}
<nav>
  <ul>
    <li>
  </ul>
</nav>

2
  • 1
    Здравствуйте. У вас просто меняется размер текста при наведении(font-size: 18px), из-за этого размер кнопки увеличивается, следовательно смещаются и соседние элементы. 8 авг 2018 в 13:57
  • сейчас здесь пойдут разные решения, вам нужно написать в каких границах можно менять CSS код, чтобы решить вашу задачу. Его можно полностью изменить? - например убрать inline-flex и прописать просто flex. Быстрое решение: ul {display: flex;} li{width: 33.33333333%;}. Если не подходит, пишите подробнее, что требуется. 8 авг 2018 в 14:08

1 ответ 1

1

Для ul написал display: flex; justify-content: space-between; для li написал flex-grow: 1; flex-basis: 0; лишнее удалил, остальное немного оптимизировал.

ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}

li {
  background-color: #fff;
  border-radius: 150px;
  font-size: 17px;
  flex-grow: 1;
  flex-basis: 0;
  padding: 14px 10px 21px;
  transition: all 0.5s;
  text-align: center;
}

li:hover {
  background-color: #a5ffb9;
  opacity: 0.9;
  color: black;
  font-size: 18px;
}
<nav>
  <ul>
    <li><a href="#">კატეგორიები</a></li>
    <li><a href="#">კონტაქტი</a></li>
    <li><a href="#">ანგარიში</a></li>
  </ul>
</nav>

Ваш ответ

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