Почему ссылка растягивается на всю ширину страницы?

Question

[minaev007]

https://jsfiddle.net/tq3v28zu/
Подскажите почему переход по ссылке доступен за пределами и элемента, который она оборачивает и как это исправить.
Заранее спасибо

Comments

[kindqqq]

Тоже столкнулся с таким вопросом, я нашел такое решение:
Ссылке присваеваешь класс допустим так:
преимущества

а потом задаешь параметры классу
.box_center {
display: inline-block; //* Инлайн-блок делает ссылку соразмерно контенту, а не всей строке
margin-left: 50%;
transform: translateX(-50%);
}

Answer 1

[Arti-Web]

Вопрос уже устарел, однако я решил эту проблему не с помощью костылей, а с помощью width: max-content для ссылки

Comments

[Fenjkeee]

Устарел, не устарел.... а мне Ваш ответ помог, спасибо.

[ZakharChernikov]

Вопрос живее живых:)) Благодарю!

[saluteismyname]

Спасибо!

[HARDPLATON]

Ты меня спас!!!

Answer 2

[Дмитрий Гаджиев]

Укажите границы в div

Comments

[minaev007]

border не помогает

[Дмитрий Гаджиев]

minaev007: зачем border? у div есть свойства width и lenght которые указывают размер дива. задай или в процентах или в пикселях или и т.д.

[minaev007]

Дмитрий Гаджиев: так стоят же
width: 400px;
height: 150px;

[minaev007]

Дмитрий Гаджиев: единственное что помогает, так это создать еще один оберточный div вокруг ссылки - и задать границы ему. тогда ссылка не вылазит. но это ж вроде как-то не совсем изящно)

Answer 3

[Владислав]

Скорее всего проблема действительно в том, что у Вас display: table.

Если вам надо кнопки, то попробуйте использовать button и паддинг.
https://jsfiddle.net/tq3v28zu/9/

Comments

[minaev007]

ну это я так центрирую

Answer 4

[kindqqq]

1)Оборачиваешь ссылку в div
2)диву задаешь класс например box_center
3)вся фишка в том чтоб диву(обертке) дать display: inline-block и потом выровнять
.box_center{
display: inline-block;
margin-left: 50%;
transform: translateX(-50%);
}