Как исправить ширину у ссылок при :hover?

Question

[Danila232]

Cсылки из коротких слов занимают ширину ссылки самого длинного слова, из-за это при наведении на ссылки с короткими словами возникает ошибка - наводишь на пустое пространство рядом с ними, а :hover у них уже срабатывает, как это исправить?

<div class="footer-top__nav">
					<div class="footer-top__nav__links">
						<a href="">Услуги</a>
						<a href="">О компании</a>
						<a href="">Сертификаты</a>
						<a href="">Отзывы</a>
						<a href="">Полезные материалы</a>
						<a href="">Благотворительность</a>
					</div>
</div>

.footer-top__nav{
	flex: 0 1 30%;
}
.footer-top__nav__links {
	display: inline-flex;
	flex-direction: column;
	gap: 20px;
}
.footer-top__nav__links a{
	font-size: 14px;
	font-weight: 700;
	line-height: 120%;
	color: #fff;
}
.footer-top__nav__links a:hover{
	cursor: pointer;
	text-decoration: 2px underline dotted #4F8FF0;
}

Comments

[Ankhena]

Посмотрите как лучше верстать навигацию https://www.youtube.com/watch?v=y52rtbUeCac&list=P...
Заодно и эта проблема отпадет.

Answer 1

[Danny Arty]

Добавьте свойство align-items. Так как по умолчанию у него указано stretch, которое в данном случае означает, что дочерние элементы flex-контейнера будут занимать всю его ширину.

.footer-top__nav__links {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

Comments

[Danila232]

Ёкарный бабай, ну да, flex-direction: column же поменял главную ось, так что теперь align-items тут решает, спасибо!