Bymas | ссылки клилклабелные

всем хай, давно не писал дизайн и проктически все позабывал, вот решил попробовать заного. делаю мини менюшку через флекс. все получилось но сама область ссылки нажимается на саму ссылку а мне надо что бы нажималась на область кнопки, пробовал class всунуть в нутрь ссылки но флекс кривой становится.

css

   .row {   display: flex;   flex-wrap: wrap;   padding:12px; }  .col  {   flex: 1 0 18%;    margin: 5px;   background:rgb(0,102,255,0.4);   height: 30px;      display: flex;   align-items: center;   justify-content: center;   border-radius:12px; }  .col a {color: #fff;}  .col:hover{ opacity:0.5;}

html

   echo '<div class="row">'; echo'<div class="col"><a href=" ">Рейтинг</a></div> <div class="col"><a href=" ">Новые</a></div>  <div class="col"><a href=" '">Просмотры</a></div>';

Изображение

------

90098_20260401225018.png (4.4 Kb)
Скачиваний: 2

css

   .row {   display: flex;   flex-wrap: wrap;   padding: 12px; }  .col {   flex: 1 0 18%;   margin: 5px;   background: rgb(0, 102, 255, 0.4);   height: 30px;   display: flex;   align-items: center;   justify-content: center;   border-radius: 12px; }  .col a {   color: #fff;   text-decoration: none;   width: 100%;         height: 100%;     display: flex;      align-items: center;    justify-content: center;   padding: 0;    }  .col:hover {   opacity: 0.5; }

________
посл. ред. 01.04.2026 в 23:07; всего 1 раз(а); by )(aOS

php

   echo '<div class="row">         <div class="col"><a href="#">Рейтинг</a></div>         <div class="col"><a href="#">Новые</a></div>         <div class="col"><a href="#">Просмотры</a></div>       </div>';

css

   .row {   display: flex;   flex-wrap: wrap;   padding: 12px; }  .col {   flex: 1 0 18%;   margin: 5px;   background: rgba(0, 102, 255, 0.4);   height: 30px;   border-radius: 12px;   /* Убрали display: flex и центрирование отсюда */ }  .col a {   display: flex;           /* Делаем саму ссылку флекс-контейнером */   align-items: center;     /* Центрируем текст внутри ссылки */   justify-content: center;    width: 100%;             /* Растягиваем ссылку на всю ширину родителя */   height: 100%;            /* Растягиваем ссылку на всю высоту родителя */   color: #fff;   text-decoration: none; }  .col:hover {   opacity: 0.5; }