При наведении на ссылки, другие блоки съезжают на величину добавленных паддингов для бэкграунда ссылки
Пример:
.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 шт):
Автор решения: Александр Сычёв
→ Ссылка
Это можно решить, если 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>