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

Question

[HappyRa1n]

При выделении пункта меню, выбранный пункт должен выделиться овальной рамкой, однако в этом случае остальные пункты сдвигаются, как убрать этот сдвиг? Можно ли как-то сделать границы абсолютными?

.nav__link{
    font-size: 16px;
     display: inline-block;
     padding: 0 15px;
     margin-top: 5px;
    color: #fff;
    text-decoration: none;
}
.nav__link.active {
    color: white;
    text-decoration: none;
    border: 1px solid white;
    border-radius: 50px; 
}
.nav__link:hover{
    color: white;
    text-decoration: none;
    border: 1px solid white;
    border-radius: 50px; 
}

Comments

[Алексей Юдов]

А можно разметку предоставить или нужно угадать?

Answer 1

[Алексей Юдов]

Ответ.

.nav__link{
    font-size: 16px;
    display: inline-block;
    padding: 0 15px;
    margin-top: 5px;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0);
}

Comments

[Rustam Bainazarov]

Или box-shadow вместо border.

[HappyRa1n]

Спасибо!

[Алексей Юдов]

Рустам Байназаров, "куратор тега", что это?

[Rustam Bainazarov]

TCloud, не совсем понял.

[Алексей Юдов]

Рустам Байназаров, у тебя в name написано "Рустам Байназаров Рустам Байназаров Куратор тега CSS", что это за статус, "куратор". В доках тосетра не нашел

[Rustam Bainazarov]

TCloud, статус такой, мол, из-за того, что я много отвечал. Теперь могу что-то делать; не знаю, что именно.