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

Разное 

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

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

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

Почта

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

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

Почта

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

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Ссылки внутри страницы | WebReference

Ссылки допустимо указывать не только на другой сайт или документ, но и на элемент внутри страницы. Такая возможность применяется для добавления оглавления страницы с быстрым переходом к нужному разделу (так делает, например, Википедия) или для создания различных элементов интерфейса вроде вкладок.

Элемент, на который требуется сделать ссылку, обозначается идентификатором, а адрес ссылки меняет свой вид на #id, как показано в примере 1.

Пример 1. Ссылка на заголовок

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ссылки</title> <style> .toc { padding: 0 20px; background: #f0f0f0; display: inline-block; } </style> </head> <body> <div> <h3>Оглавление</h3> <ul> <li><a href=»#t1″>Сепульки</a></li> <li><a href=»#t2″>Сепулькарии</a></li> <li><a href=»#t3″>Сепуление</a></li> </ul> </div> <h3>Сепульки</h3> <p>Важный элемент цивилизации ардритов с планеты Энтеропия.
</p> <h3>Сепулькарии</h3> <p>Устройства для сепуления.</p> <h3>Сепуление</h3> <p>Занятие ардритов с планеты Энтеропия.</p> </body> </html>

Результат данного примера показан на рис. 1. К каждому заголовку <h3> добавлен уникальный идентификатор через атрибут id, а сама ссылка имеет вид #id, где id — идентификатор элемента на который делается переход.

Рис. 1. Ссылки на заголовки

Как видите, по своему виду такие ссылки ничем не отличаются от ссылок на другой сайт. Но стоит открыть любую ссылку в примере, как браузер переместит фокус к заголовку, на который ведёт ссылка. При этом немного поменяется и адресная строка, в конец пути будет добавлено #t1 или подобное. Если нажать кнопку «Назад» в браузере, то мы вернёмся обратно к началу страницы и адресная строка примет исходный вид. Это позволяет передавать ссылки вида webref.ru/layout/#title, при открытии такой ссылки в браузере будет загружена страница и сделан переход к элементу с идентификатором title.

Псевдокласс :target

CSS позволяет управлять видом элемента, на который был сделан переход, с помощью псевдокласса :target, как показано в примере 2.

Пример 2. Использование :target

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ссылки</title> <style> .toc { padding: 0 20px; background: #f0f0f0; display: inline-block; } h3:target { background: #cd529e; color: #fff; padding: 5px; } </style> </head> <body> <div> <h3>Оглавление</h3> <ul> <li><a href=»#t1″>Сепульки</a></li> <li><a href=»#t2″>Сепулькарии</a></li> <li><a href=»#t3″>Сепуление</a></li> </ul> </div> <h3>Сепульки</h3> <p>Важный элемент цивилизации ардритов с планеты Энтеропия.</p> <h3>Сепулькарии</h3> <p>Устройства для сепуления.
</p> <h3>Сепуление</h3> <p>Занятие ардритов с планеты Энтеропия.</p> </body> </html>

Теперь, если переходить по ссылкам оглавления, то заголовки будут менять свой цвет и фон (рис. 2).

Рис. 2. Стиль заголовка при переходе

См. также

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

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

Элементы

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

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

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

Создать HTML 

 <тело>
  <дел>
    W3Docs
    
      <промежуток>

Создать 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 пикселей;
        выравнивание текста: по центру;
      }
    
  
  <тело>
     w3docs.com/learn-html/html-introduction.html">
      <дел>
        Это кликабельный div.

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

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

Тег div HTML

❮ Назад Полный справочник HTML Далее ❯


Пример

Раздел

в документе, оформленном с помощью CSS:






 

Это заголовок в элементе div


 

Это какой-то текст в элементе div.



Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Тег

определяет раздел или раздел в HTML-документе.

Тег

используется в качестве контейнера для элементов HTML — который затем стилизуется с помощью CSS или обрабатывается с помощью JavaScript.

Тег

легко стилизуется с помощью используя атрибут class или id.

Любой контент может быть помещен внутрь

ярлык!

Примечание: По умолчанию браузеры всегда помещают разрыв строки до и после

элемент.

Поддержка браузера

Элемент
<дел> Да Да Да Да Да

Глобальные атрибуты

Тег

также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег

также поддерживает атрибуты событий в HTML.

Связанные страницы

Учебник по HTML: Блочные и встроенные элементы HTML

Учебник по HTML: Макет HTML

Ссылка на DOM HTML: Div Object

элемент с следующие значения по умолчанию:

Пример

div {
  display: block;
}

Попробуйте сами »

❮ Предыдущая Полный справочник HTML Следующий ❯


НАБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
9000 3

Основные каталожные номера
Справочник по HTML
Справочник по CSS
javaScript Ссылка
Ссылка на SQL
Справочник Python
W3.

No related posts.

Автор записи

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

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