Ссылка div: html — Как сделать весь блок ссылкой?

Leave a Comment / Разное / By /

html — Ссылка выходит за рамки div

Всем привет, есть блок с шириной в 20%, он обернут в ссылку, все хорошо, да вот только ссылка почему-то по ширине занимает 100% документа, пробовал и задавать ширину, и прочее — не выходит, не могу понять, в чем причина, прочитал как оборачивать блок в ссылку но так, как описано — не выходит, может кто подскажет. Вот код:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-spacing</title>
  <style>

       .div1 {
           display:block;
           width:20%;
           height:80px;
           background:red;
       }
  
  </style>
 </head>
 <body>
     <a href="#ler"><div></div></a>
 </body>
</html>
  • html
  • css
.div1 {
    /*display:block*/
    display: inline-block;
    width: 20%;
    height: 80px;
    background: red;
}
<a href="#ler">
    <div></div>
</a>

По хорошему, блочный элемент нельзя помещать в строчный. Поэтому такая ерунда и происходит.

Лучше сделать так (если есть такая возможность):

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-spacing</title>
  <style>
       .div1 {
           display:block;
           width:20%;
           height:80px;
           background:red;
       }
       .link {
           display: inline-block; 
           width: 100%;
           height: 100%
       }
  </style>
 </head>
 <body>
     <div><a href="#ler"></a></div>
 </body>
</html>

Советую почитать вам о блочной модели документа и о том, как правильно с ней работать 🙂

Например так можно решить (поменять местами ширину немножко):

a {
    width: 20%;
    display: block;
}

.div1 {
    display:block;
    height:80px;
    background:red;
}
<a href="#ler"><div></div></a>
1

Добавил в css position: absolute

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-spacing</title>
  <style>
       . div1 {
           display:block;
           width:20%;
           height:80px;
           background:red;
           position: absolute;
       }
  </style>
 </head>
 <body>
     <a href="#ler"><div></div></a>
 </body>
</html>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Блок ссылок на дополнительные материалы.

Турбо‑страницы для контентных сайтов

Чтобы разместить блок дополнительных материалов, используйте вложенную структуру элементов

div:

<div data-block="feed" data-layout="vertical" data-title="Read also">
    <div data-block="feed-item"
         data-title="Title 1"
         data-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
         data-href="https://example.com/page-1.html"
         data-thumb="https://clck.ru/FFAuR"
         data-thumb-position="top"
         data-thumb-ratio="16x10">
    </div>
    <div data-block="feed-item"
         data-title="Title 2"
         data-description="Etiam sed finibus felis. Sed ornare maximus tincidunt"
         data-href="https://example.com/page-2.html"
         data-thumb="https://clck.ru/FFAvn"
         data-thumb-position="left"
         data-thumb-ratio="4x3">
    </div>
    <div data-block="feed-item"
         data-title="Title 3"
         data-description="Nullam at lacus laoreet, volutpat metus ut, imperdiet metus"
         data-href="https://example.
 
 com/page-3.html"
         data-thumb="https://clck.ru/Kiun7"
         data-thumb-position="left"
         data-thumb-ratio="4x3">
    </div>
</div>

Корневой <div data-block="feed"> должен содержать хотя бы один вложенный <div data-block="feed-item">. Количество таких блоков не ограничено, их можно размещать в любом месте Турбо‑страницы.

Атрибуты внешнего <div data-block="feed">:

АтрибутОписание
data-layout		Ориентация списка ссылок. Возможные значения:

  • horizontal — ссылки располагаются горизнотально.

  • vertical — ссылки располагаются вертикально.

Значение по умолчанию — vertical.

data-titleЗаголовок блока ссылок.

Значение по умолчанию — «Читайте также».

Атрибуты вложенного <div data-block="feed-item">:

АтрибутОписание
data-href * Обязательный атрибут.»}}»>URL страницы.
data-title * Обязательный атрибут.»}}»>Текст ссылки.
data-descriptionКороткое описание.
data-thumbСсылка на картинку. Внимание. Атрибут является обязательным при горизонтальном расположении ссылок: data-layout="horizontal".

data-thumb-position

Положение картинки. Возможные значения:

  • left;

  • right;

  • top.

Значение по умолчанию — left.

Атрибут игнорируется при горизонтальном расположении ссылок: data-layout="horizontal".

data-thumb-ratio Пропорции картинки. Возможные значения:

  • 1 × 1;

  • 2 × 3;

  • 3 × 2;

  • 3 × 4;

  • 4 × 3;

  • 16 × 9;

  • 16 × 10.

По умолчанию слева и справа отображаются картинки в формате 1 × 1, а сверху 16 × 9.

* Обязательный атрибут.

Написать в службу поддержки

Была ли статья полезна?

Как сделать Div кликабельной ссылкой

Элементы

важны в веб-дизайне на основе CSS, поскольку они придают структуру HTML. Иногда вам может понадобиться сделать весь элемент
кликабельным как ссылку. Для этого вы можете найти некоторые методы в нашем фрагменте и выбрать подходящий для вас метод.

Выполните указанные шаги для первого решения. Речь идет о создании тега привязки внутри div и стилизации привязки таким образом, чтобы она покрывала всю область внутри div

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

Создать HTML 

 <тело>
  <дел>
    W3Docs
     w3docs.com/">
      <промежуток>

Создать CSS 

 .контейнер {
  размер шрифта: 5em;
  цвет фона: #a8a8a8;
  белый цвет;
  ширина: 8em;
  высота: 2см;
  высота строки: 2;
  выравнивание текста: по центру;
  семейство шрифтов: Helvetica, Arial, без засечек;
  вес шрифта: полужирный;
  курсор: указатель;
  положение: родственник;
}

.связь {
  положение: абсолютное;
  ширина: 100%;
  высота: 100%;
  сверху: 0;
  слева: 0;
  z-индекс: 1;
}

Давайте посмотрим полный код.

Пример превращения div в интерактивную ссылку: 

 

  <голова>
    <стиль>
      .контейнер {
        размер шрифта: 5em;
        цвет фона: #a8a8a8;
        белый цвет;
        ширина: 8em;
        высота: 2см;
        высота строки: 2;
        выравнивание текста: по центру;
        семейство шрифтов: Helvetica, Arial, без засечек;
        вес шрифта: полужирный;
        курсор: указатель;
        положение: родственник;
      }
      .
  связь {
        положение: абсолютное;
        ширина: 100%;
        высота: 100%;
        сверху: 0;
        слева: 0;
        z-индекс: 1;
      }
    
  
  <тело>
    <дел>
      W3Docs
      
        <промежуток>

Попробуй сам »

Результат

W3Docs

Вы также можете использовать

, вложенный в гиперссылку.

 

  <голова>
    <стиль>
      а {
        дисплей: блок;
        фон: оранжевый;
        отступ: 20 пикселей;
        выравнивание текста: по центру;
      }
    
 

  
  <тело>
    
      <дел>
        Это кликабельный div.

Попробуй сам »

Поскольку элемент div находится внутри тега привязки, тег привязки покрывает всю область элемента div, и, таким образом, элемент div становится ссылкой, по которой можно щелкнуть.

Блоки Div внутри блока ссылок — Общие — Форум

Rodrigo-Narciso 1

Привет всем,

У меня есть домашняя страница с кучей блоков DIV, и каждый блок содержит много других элементов внутри. Я пытаюсь добавить ссылку, которая будет активна в любой области блока. Я пытался поставить блок ссылок со всем внутри, но это не работает. Я попытался применить к этому блоку ссылок тот же класс, что и для блока DIV, но это не сработало. Если я просто помещу блок ссылок сверху, а блок DIV — после, ссылка не будет работать для всего DIV.

Есть идеи, в чем может быть проблема?

Вот мой сайт Только для чтения:
https://preview.webflow.com/preview/rodrigo-narciso-portfolio?utm_source=rodrigo-narciso-portfolio&preview=02ec8746603197a58e1abcc1d4f575b2

Спасибо!

ДизайнОтDre (Андре Герра) 2

Привет, Родриго,

В прошлом я добился этого, поместив блок ссылок внутри каждого DIV, поставьте ему position:absolute и установите его на 0 сверху, снизу, слева и справа. Убедитесь, что родительский DIV, в котором находится блок ссылок, имеет значение position:relative или absolute , чтобы блок ссылок оставался внутри него.

Дайте блоку ссылок более высокий z-индекс, чем содержимое div, и он появится поверх всего внутри DIV. Я бы скрыл блоки ссылок, пока вы все еще работаете с контентом, чтобы вы могли щелкать контент. Когда вы будете готовы выйти в эфир, верните блоки ссылок на 9.0072 Дисплей: блок .

Имеет ли это смысл?

Дис (Д Джонс) 3

Брух… имо, эта планировка излишне сложная, если не сказать больше.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *