1

Пример:

.dashboard__card__1__nav {
  display: flex;
  padding-left: 7px;
  margin-top: 71px;
  margin-bottom: 24px;
}

.dashboard__card__1__nav a {
  font-size: 12px;
  line-height: 133%;
  color: #666666;
}

.dashboard__card__1__nav a:hover {
  padding: 7px 11px;
  background: #2A2A2A;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.043);
  border-radius: 4px;
  color: #FFFFFF;
}

.dashboard__card__1__nav li:not(:first-child) {
  margin: 0px 16px;
}
<ul class="dashboard__card__1__nav">
  <li>
    <a href="">File previews</a>
  </li>
  <li>
    <a href="">Column view</a>
  </li>
  <li>
    <a href="">List view</a>
  </li>
  <li>
    <a href="">Multi select actions</a>
  </li>
  <li>
    <a href="">Path navigator</a>
  </li>
</ul>

Скрин:

введите сюда описание изображения

1 ответ 1

1

Это можно решить, если padding: 7px 11px; задать для класса .dashboard__card__1__nav a.

А из класса .dashboard__card__1__nav a:hover наоборот убрать padding: 7px 11px;

Ваш пример:

.dashboard__card__1__nav {
  display: flex;
  padding-left: 7px;
  margin-top: 71px;
  margin-bottom: 24px;
}

.dashboard__card__1__nav a {
  font-size: 12px;
  line-height: 133%;
  color: #666666;
  padding: 7px 11px;
}

.dashboard__card__1__nav a:hover {
  
  background: #2A2A2A;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.043);
  border-radius: 4px;
  color: #FFFFFF;
}

.dashboard__card__1__nav li:not(:first-child) {
  margin: 0px 16px;
}
<ul class="dashboard__card__1__nav">
  <li>
    <a href="">File previews</a>
  </li>
  <li>
    <a href="">Column view</a>
  </li>
  <li>
    <a href="">List view</a>
  </li>
  <li>
    <a href="">Multi select actions</a>
  </li>
  <li>
    <a href="">Path navigator</a>
  </li>
</ul>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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