При добавлении к иконки i элемента a (ссылка) все ломается?
При добавлении к иконки i элемента a (ссылка) все ломается!!!
Ситуация такая при сужении экрана работало все нормально блоки адаптировались ! После того как добавил к иконке тег а(ссылка) блок начал ломаться (те цетральный блок начал сползать вниз создовая по середине пробел!
<div class="rightFavorites"> <div class="container"> <div class="rightFavorites-title"> <h2>My Favorites</h2> </div> <a href=""> <div class="righFavorites-module"> <div class="righFavorites-inner"> <div class="righFavorites-item-img"> <img src="/_ClassifiedDesign/Layout-03-Ecommerce/images/test2.jpg" alt=""> </div> <div class="righFavorites-item-box"> <div class="righFavorites-box-title"> <span>Пряжа мохер и хлопок травка выввввввввввфвф</span> </div> <div class="righFavorites-box-price"> <span> <h4>20000 Euro</h4> </span> </div> <div class="righFavorites-box-location"> <span> <h5>Tallinn, Häädemeeste vald, Pärnumaa </h5> </span> </div> <div class="righFavorites-box-date"> <span> <h5>22.01.2024</h5> </span> </div> </div> <div class="righFavorites-item-iqon"> <div class="test2341"> <a href=""><i class="righFavorites-itel-letter fa-solid fa-envelope"></i></a> </div> <i class="righFavorites-itel-trash fa-solid fa-trash"></i> </div> </div> </div> </div> </a> </div> |
<div class="rightFavorites"> <div class="container"> <div class="rightFavorites-title"> <h2>My Favorites</h2> </div> <a href=""> <div class="righFavorites-module"> <div class="righFavorites-inner"> <div class="righFavorites-item-img"> <img src="/_ClassifiedDesign/Layout-03-Ecommerce/images/test2.jpg" alt=""> </div> <div class="righFavorites-item-box"> <div class="righFavorites-box-title"> <span>Пряжа мохер и хлопок травка выввввввввввфвф</span> </div> <div class="righFavorites-box-price"> <span> <h4>20000 Euro</h4> </span> </div> <div class="righFavorites-box-location"> <span> <h5>Tallinn, Häädemeeste vald, Pärnumaa </h5> </span> </div> <div class="righFavorites-box-date"> <span> <h5>22.01.2024</h5> </span> </div> </div> <div class="righFavorites-item-iqon"> <div class="test2341"> <a href=""><i class="righFavorites-itel-letter fa-solid fa-envelope"></i></a> </div> <i class="righFavorites-itel-trash fa-solid fa-trash"></i> </div> </div> </div> </div> </a> </div>
/*Favodite-dashboard*/ .rightFavorites { } .rightFavorites-title{ margin-bottom: 30px; } .righFavorites-module { } .righFavorites-inner { display: flex; align-items: stretch; margin-bottom: 10px; } .righFavorites-item-img { max-width: 200px; min-width: 200px; } .righFavorites-item-box { padding: 10px 15px; flex-grow: 1; margin-bottom: 20px; } .righFavorites-box-title{ font-size: 18px; margin-bottom: 5px; font-weight: 600; display: inline-block; max-width: 270px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .righFavorites-box-location { display: inline-block; max-width: 270px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .righFavorites-box-date { padding-top: 5px; } .righFavorites-item-iqon a { display: flex; /* Разместить иконки горизонтально */ flex-direction: column; margin-left: auto; /* Поместить иконки вправо */ } .righFavorites-itel-letter{ padding: 10px 10px; background-color: var(--button-color); color:var(--text-button-color); border-radius: 6px; } .righFavorites-itel-trash{ background-color: var(--unique-button-color); padding: 10px 10px; color:var(--text-button-color); border-radius: 6px; margin-top: 10px; } .righFavorites-inner:hover{ color: var(--text-color); } @media (max-width: 575px) { .righFavorites-box-location h5 { display: inline-block; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .righFavorites-box-title{ display: inline-block; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .righFavorites-item-iqon{ margin-left: 0px; } .righFavorites-box-title { margin-bottom: 10px; font-size: 18px; font-weight: 500; } .righFavorites-item-box{ padding-right: 0px; padding-left: 5px; } .righFavorites-item-img { max-width: 160px; min-width: 160px; } .righFavorites-inner { display: flex; line-height:16px; } } .righFavorites-item-img, .righFavorites-item-box, .righFavorites-item-iqon { display: inline-block; vertical-align: top; /* Выравнивание по верхнему краю, чтобы избежать проблем с высотой */ } <img src="https://habrastorage.org/webt/65/e4/8d/65e48dab1cc35279334796.png" alt="image"/> <img src="https://habrastorage.org/webt/65/e4/8d/65e48db3ad700251131289.png" alt="image"/> |
/*Favodite-dashboard*/ .rightFavorites { } .rightFavorites-title{ margin-bottom: 30px; } .righFavorites-module { } .righFavorites-inner { display: flex; align-items: stretch; margin-bottom: 10px; } .righFavorites-item-img { max-width: 200px; min-width: 200px; } .righFavorites-item-box { padding: 10px 15px; flex-grow: 1; margin-bottom: 20px; } .righFavorites-box-title{ font-size: 18px; margin-bottom: 5px; font-weight: 600; display: inline-block; max-width: 270px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .righFavorites-box-location { display: inline-block; max-width: 270px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .righFavorites-box-date { padding-top: 5px; } .righFavorites-item-iqon a { display: flex; /* Разместить иконки горизонтально */ flex-direction: column; margin-left: auto; /* Поместить иконки вправо */ } .righFavorites-itel-letter{ padding: 10px 10px; background-color: var(--button-color); color:var(--text-button-color); border-radius: 6px; } .righFavorites-itel-trash{ background-color: var(--unique-button-color); padding: 10px 10px; color:var(--text-button-color); border-radius: 6px; margin-top: 10px; } .righFavorites-inner:hover{ color: var(--text-color); } @media (max-width: 575px) { .righFavorites-box-location h5 { display: inline-block; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .righFavorites-box-title{ display: inline-block; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .righFavorites-item-iqon{ margin-left: 0px; } .righFavorites-box-title { margin-bottom: 10px; font-size: 18px; font-weight: 500; } .righFavorites-item-box{ padding-right: 0px; padding-left: 5px; } .righFavorites-item-img { max-width: 160px; min-width: 160px; } .righFavorites-inner { display: flex; line-height:16px; } } .righFavorites-item-img, .righFavorites-item-box, .righFavorites-item-iqon { display: inline-block; vertical-align: top; /* Выравнивание по верхнему краю, чтобы избежать проблем с высотой */ } <img src="https://habrastorage.org/webt/65/e4/8d/65e48dab1cc35279334796.png" alt="image"/> <img src="https://habrastorage.org/webt/65/e4/8d/65e48db3ad700251131289.png" alt="image"/>
Дополнительно:
При добавлении к иконки i элемента a (ссылка) все ломается!!!
Ссылки нельзя вкладывать в ссылки.
Не забывайте проверять код валидатором и можно будет не ставить три восклицательных знака :)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для начала, давайте разберемся, почему именно "все ломается" при добавлении к иконке i элемента a.
Проблема, скорее всего, связана с тем, что элемент a (ссылка) имеет свои стили по умолчанию, которые могут влиять на расположение и отображение других элементов на странице. Когда вы добавляете иконку i внутрь элемента a, возможно, что стили элемента a начинают применяться к иконке i, что может вызвать нежелательные изменения в отображении.
Чтобы решить эту проблему, вам следует явно указать стили для элемента i, чтобы они не пересекались со стилями элемента a. Например, вы можете добавить класс для элемента i и задать ему нужные стили в CSS.
Пример:
.icon { display: inline-block; width: 20px; height: 20px; background-color: blue; color: white; text-align: center; line-height: 20px; } <a href="#" class="link"><i class="icon">A</i> Ссылка</a>
Таким образом, вы можете управлять отображением и расположением иконки i внутри элемента a, не нарушая структуру и стилизацию других элементов на странице. Не забудьте также проверить другие стили, которые могут влиять на элементы a и i, чтобы избежать конфликтов и "ломания" отображения.