Как сделать что бы ссылка не перемещалась при наведении?

Question

[ingvarrlug]

При наведение курсора на ссылки слегка перемещаются, как сделать так что бы они оставались на своём месте?

Код:
CSS :

.nav_link {
    text-decoration: none;
    margin-left: 50px;
    color: black;   
}

.nav_link:hover {
    font-weight: bold;
}

Comments

[Ankhena]

Как убрать смещение ссылок при увеличение жирности текста?

Answer 1

[Kirill Makarov]

Из за bold, у тебя увеличивается ширина текста, и соответственно он маленько скачет. Следовательно необходимо его заменить и выбрать другой способ выразить наведение

Comments

[VictorDax]

Дело в действительности в изменяющейся ширине текста из-за font-weight: bold;
Если мы говорим о том как убежать от проблемы, можно действительно воспользоваться любым другим способом выделения ссылки, но говоря именно о решении проблемы, нужно немного изменить вёрстку. Судя по всему все ссылки находятся в блоках, которые по ширине подстраиваются под ширину текста. Один из вариантов решения - задать фиксированную ширину данным блокам (с учётом максимальной ширины, когда текст жирный), тогда изменение ширины текста никак не повлияет на блок.

Answer 2

[Pavel Pavel]

Так?
https://jsfiddle.net/9vfpwm7r/4/
margin-right у li можно убрать, а текст(ссылки) не будет смещаться даже если будет налазить друг на друга.

Answer 3

[Сергей]

Замени font-weight: bold; на color: что-нибудь