Ссылка тега расширяется, даже если ширина текста ограничена 50 %. ⇐ CSS

[Гость]

Я столкнулся со следующей проблемой и не могу понять, почему это происходит.
При изменении текста под изображением размер ссылки начинает слишком сильно увеличиваться, даже если ее ширина ограничена 50%. Размер должен соответствовать синему изображению папки.
Для визуализации проблемы имеется изображение.

Код: Выделить всё

.projectsContainer {
display: block;
width: 80%;
align-items: center;
margin: auto;
}

.projectLink {
display: flex;
flex-direction: row;
justify-content: space-around;
margin-top: 20px;
border: 2px yellow solid;
}

.projectText {
display: flex;
flex-direction: column;
text-align: center;
width: 50%;
}

a {
border: 2px red solid;
}

img {
height: 150px;
width: 200px;
border: 2px orange solid;
}

#topText {
color: #ffffff;
margin: 5px 5px 5px 5px;
text-align: center;
}

Код: Выделить всё

These are the projects I have worked on!




[url=https://legacy.curseforge.com/minecraft/mc-addons/enhanced-blast-furnace-datapack]
[img]../images/Yellow_Folder.png[/img]
Enhanced Blast Furnace. A datapack for Minecraft
[/url]


[img]../images/Green_Folder.png[/img]
Enhanced Blast Furnace. A datapack for Minecraft


[img]../images/Blue_Folder.png[/img]
Project

Я пробовал следующее:

• Размещение тега p вне тега a. Это приводит к полному исчезновению текста и полному смещению изображений (папок).
• Привязка тегов a с классом к ширине не работает. Я также не могу использовать тег a в CSS, потому что это сломало бы мою панель навигации.
• Я пытался присвоить CSS различные атрибуты отображения, но это не помогло. реагировать на что-либо из этого. Вероятно, потому, что он наследуется от родителей.

Мне удалось решить проблему.
Я присвоил тегам a атрибут класса projectHref и вызвал его в файле CSS.

Код: Выделить всё

.projectText {
display: flex;
flex-direction: column;
text-align: center;
}

a.projectHref {
/*border: 2px red solid;*/
width: 200px;
}

By forcing the width the same as the folder image. This is (most) probably not the prettiest/best solution but it works.
If anyone has a way or idea to improve the code, feel free to post it here.


Источник: https://stackoverflow.com/questions/781 ... idth-of-50