Свяжите весь DIV
Я хочу СВЯЗАТЬ DIV "элемент-атрибут". При необходимости я могу редактировать HTML и CSS, но не знаю, как заставить их работать.
.item-attributes {
display: table;
width: 100%;
height: 50px;
}
.item-attributes__item {
display: table-cell;
padding: 5px;
text-align: center;
vertical-align: middle;
}
.item-attributes__link i {
margin: 0;
margin-top: 0px;
position: absolute;
top: 50%;
right: 0;
vertical-align: middle;
}<div class = "item-attributes">
<div class = "item-attributes__item">
<a href = "#" class = "item-attributes__link">
<i class = "fa fa-long-arrow-right"></i>
</a>
</div>
</div>Итак ... Вы хотите, чтобы весь div был интерактивной ссылкой? Просто <a href = "…"><div>…</div></a>.
это не работает, @helb.
@Alex, вы должны обновить свой код, чтобы показать, что вы это сделали, и вам будет легче увидеть проблему.
Это определенно работает, вы буквально завертываете <a href = "...Your Link Here..."> <div>All your div content here</div></a>
Ответы 1
Альтернативный способ - сделать .item-attributes__item вашей связью.
.item-attributes {
display: table;
width: 100%;
height: 50px;
}
.item-attributes__link {
display: table-cell;
padding: 5px;
text-align: center;
vertical-align: middle;
background-color: #dfd;
}
.item-attributes__link i {
margin: 0;
margin-top: 0px;
position: absolute;
top: 50%;
right: 0;
vertical-align: middle;
}<div class = "item-attributes">
<a href = "#" class = "item-attributes__link">
<i class = "fa fa-long-arrow-right">Item</i>
</a>
</div>технически это работает, но удаление моего div из структуры испортит остальную часть HTML моей страницы. я могу сделать это, не удаляя div из структуры?
Структура выглядит точно так же, как и та, которую вы разместили выше. Ваш элемент <i> был смещен в вашем исходном коде на основе позиционирования, не уверен, что вы имели в виду или нет.
Вы удалили из кода "item-attributes__item". Мне нужно, чтобы DIV остался там. Могу ли я сделать весь этот DIV ссылкой и при этом оставить его как DIV?
@Alex Я удалил item-attributes__item, но он был заменен на item-attributes__link. У них обоих одинаковый стиль CSS. Если вам нужен стиль для других мест на странице, просто снова добавьте CSS-код item-attributes__item.
Просто поместите все, что хотите связать, в элемент
a.