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

Разное 

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

Вопрос задан

Изменён 6 лет 1 месяц назад

Просмотрен 2k раз

Всем привет, есть блок с шириной в 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

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

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

Почта

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

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

Почта

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

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

javascript — Скрыть все ссылки кроме одной в разных блоках div

Задать вопрос

Вопрос задан

Изменён 10 месяцев назад

Просмотрен 29 раз

Здравствуй, проблема такая, есть код:

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div>
  <div></div>
</div>
<div>
  <div></div>
  <div></div>
</div>
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

в каждом div c классом container мне надо скрыть . hide() все вложенные div кроме первого или не скрывать если в div c классом container cодержится только один вложенный div, подскажите пожалуйста как можно это реализовать с использованием javascript, спасибо. Уточню что div с классом container может повторяться в любом количестве, как и количество вложенных элементов div которых всегда не менее одного.

  • javascript
  • html
  1. querySelectorAll по классу container складываете в переменную. Например в переменную с названием containers.
  2. Цикл по элементам в этой переменной (containers.forEach)
  3. На каждой итерации кладёте ещё в одну переменную узлы, найденные через querySelectorAll уже в конкретном элементе на текущей итерации (el.querySelectorAll('.st_att')). Например в переменную с названием links.
  4. Делаем цикл по links. Если index элемента == 0, то continue, в ином случае делаем «прятанье».

А можно просто на CSS

.container {
    border: 1px solid black;
    width: 100px;
    height: 50px;
    margin: 5px 0;
}
.st_att {
    border: 1px solid blue;
    width: 100%; 
    height: 5px;
}
.container .st_att:not(:first-child) {
    display: none;
}
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div>
  <div></div>
</div>
<div>
  <div></div>
  <div></div>
</div>
<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

1

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

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

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

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

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

Почта

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

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

Почта

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

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

Как сделать весь контейнер DIV кликабельной ссылкой

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

Итак, я хочу, чтобы все это было кликабельно. Я хочу, чтобы значок был кликабельным, а текст — кликабельным. Все кликабельные сразу попадают в одно и то же место. Так что я мог пройти и медленно, но верно пройти, я мог обернуть свой h3 в A-тег. Итак, в начале я наберу букву A. Для этого вам нужен пробел, как и вся печать, чтобы работать, поэтому мне нужен пробел между моим h3 и моим A. Затем обертка идет от вас, и поместите A -tags, открывается перед ним и после него.

 Пробелы не нужны. просто для того, чтобы было понятно. И куда оно пойдет? Он отправится в это случайное место, которое я еще не решил. Это работает, оно стало фиолетовым, потому что это посещаемая ссылка, что не круто, но мы это исправим, но я могу продолжать делать это для этого шрифта, для этого P-тега, я мог бы делать это вечно, но так проще чтобы обернуть всю карту в A-тег. Так что я расстегиваю, все обратно. Итак, проблематичный способ, поэтому в начале есть A-тег. Я собираюсь сказать… о, начало этой карты 1, я собираюсь обернуть все это, так что Div, щелкнув Div, и он должен выделиться. Итак, есть начало и конец, поэтому я хочу начать здесь как A-tag.

Это будет решетка, ‘#’, и если вы забыли, что делает решетка или знак фунта, помните, что это просто ссылка-заполнитель, потому что у меня нет других страниц. Для этого конкретного проекта мы создадим другие страницы, потому что так и будет, но теперь это будет целая ссылка, типа, смотрите. Вот бы нормально работало, работает, типа все стало фиолетовым, потому что это посещенная ссылка, сделаем ее белой, но на самом деле она работает. Я могу нажать на них все, это все активировано.

Беда в том, что он разбил мои коробки, ты такой: «Что здесь случилось?» Помните, мы говорили о Flexbox, потому что эти карты используют Flexbox, верно? Где карты, во множественном числе, вверху, карты. Мы сказали: «Display Flex», мы сделали этих парней 30%, и самое интересное в Flexbox то, что он просто помещает их всех в одну строку, а затем мы распределяем их равномерно. Итак, мы используем множество атрибутов Flexbox. Помните, одно из правил заключалось в том, что ваши карточки должны быть прямыми, дочерними по отношению к родителю. Итак, родитель говорит, что ты Флекс, и тогда эти парни должны быть прямо под тобой.

Что мы сделали, так это втиснули A-tag между счастливой семьей. Таким образом, карты должны… Карта 1 должна быть прямым потомком карт. Я зашел слишком далеко с семьей, верно? У меня неблагополучная семья, господи, терапия, терапия для наших тегов Div. Итак, что мы собираемся сделать, так это отменить все это.

Как это обойти? В этом случае мы собираемся сделать, мы собираемся сказать, что нам нужно только добавить тег, чтобы обернуть эти три. Не обязательно, чтобы это было примерно так, это было бы круто, потому что я хотел бы, чтобы все это было кликабельно, но на данный момент это будут все ингредиенты, все, что внутри. Теперь я достаточно доволен этим. Итак, наш A-тег, так что давайте перейдем к решетке, ‘#’. Я возьму все это. Я вставлю его туда, получить его в нужном месте.

Что мы будем делать? Итак, вы, я немного отложу это. Я сейчас ничего не делаю, кроме табуляции. Так что все это выглядит красиво, так что карты, Cards1 внутри него, затем в моем A-теге, а затем все это. Все они одинаково важны, они не находятся друг в друге. Так что здесь они все на одной стороне. Давайте дадим ему предварительный просмотр и проверку. Круто, и это работает. Ты такой: «Это все фиолетово, это не работает». Цвет по умолчанию для посещенных ссылок — фиолетовый, мы его изменим. Итак, пойдем и изменим его.

Это тоже викторина, вы готовы? Проведите викторину, вы собираетесь поставить ее на паузу через секунду и попытаться решить ее самостоятельно, а затем вернуться и посмотреть, подошли ли вы близко. Я хочу, чтобы вы сделали его белым, я хочу, чтобы вы избавились от подчеркивания. Как бы вы это сделали? Поставь сейчас на паузу, и я посмотрю через секунду.

Хорошо, вы вернулись, есть несколько способов сделать это. Что вы можете сделать, вы можете сказать, что если есть карты во множественном числе и есть A-тег с h3 в нем, вы можете сделать это как мультикомбинацию. Если есть h3, они внутри A-тега, это карты, я хочу сказать, что цвет будет белым. Это наш путь. Вот этот, ты видишь там? Если это h3, то он там, он белый, и я могу сказать: «Оформление текста», это может быть, если вы все правильно поняли, вы спросите: «Как избавиться от подчеркивания?» Оформление текста, ладно, нет. Так что линия ушла под него. Это не потому, что я сделал что-то не так. Что я там сделал не так? Оформление текста. Часто мне нужна помощь кода, чтобы убедиться, что мой синтаксис правильный, мое правописание правильное. Подчеркивание исчезло. Так что это не работает, у нас все еще есть подчеркивание. Несмотря на то, что это было… кажется хорошим, но затем я должен пройти и сделать один для A-тега, а затем для значка, а затем это драматический способ.

Итак, вы могли пойти по этому пути, у вас может быть несколько разных классов. Вы могли бы просто сказать, на самом деле это не должно быть таким конкретным. Просто A-теги внутри классов. Давайте попробуем; джекпот. Что вы также можете сделать, так это сказать: «Я собираюсь столкнуться с множеством этих проблем». «Я никогда не хочу, чтобы он был фиолетовым, и я никогда не хочу, чтобы он был подчеркнут». Вы можете решить, что, помните наш сброс CSS вверху здесь, мы сделали свой собственный сброс CSS, сброс Эрика Майерса, мы могли бы назвать его сбросом Эрикмайерса/Дэнскотта, потому что мы могли бы перейти к этому сбросу CSS — где он? — и начинаем делать свою версию. Итак, мы могли бы пойти сюда и сказать, на самом деле я хочу, чтобы все A-теги были белыми, пожалуйста, и не имели подчеркивания.

Вы можете добавить его сюда, тогда он мне здесь не нужен. Мне не нужно говорить это. Таким образом, вы можете обнаружить, что «Каждый раз, когда я делаю веб-сайт, мне никогда не нужно подчеркивание». Итак, вы можете начать делать свой собственный сброс CSS. Я не собираюсь этого говорить. Я сказал перезагрузить Майерс на этот раз? Я даже не уверен. Прости, Эрик Майерс. Если вы сделали это по-другому, я бы хотел увидеть это в комментариях. Дайте мне знать, как вы это сделали, сделайте скриншот того, как вы это сделали. Вот как я заставил это работать, вы можете найти еще лучший способ и вескую причину для этого, но все, что действительно важно для меня в данный момент, это то, что на него можно кликнуть, и он весь белый без подчеркивания.

Так что остальная часть этого видео будет не очень захватывающей. Мы собираемся пройти и сделать все это. Одна вещь, которую я хочу сделать, пока мы здесь, мы начинаем приближаться к моменту, когда, я не знаю, это зависит от вас, вы можете сказать: «Это все еще очень сложно, и я не знаю, что я делаю», но если вы немного меньше нервничаете по этому поводу и смотрите на свой сайт, и вам нравится, и вы сделали эту часть, я хочу, чтобы вы гордились. Я хочу, чтобы вы прошлись и сказали: «Вообще-то, посмотрите, код Google, код идет, я кодирую веб-сайт».

Есть еще много вещей, которые нужно изучить, вы можете видеть, что в этом курсе все еще есть много видео, но, надеюсь, вы научитесь прокручивать вверх и вниз, откидываться назад и говорить: «Посмотрите на меня, я понимаю, как большая часть этого работает». На данный момент вы, возможно, нет, на следующей неделе, но в данный момент вы думаете: «Вообще-то, я могу пройтись и начать настраивать материал», или, по крайней мере, сделать еще один сайт такой же сложности, как этот, я не хочу, чтобы вы это забыли, я хочу, чтобы вы гордились, потому что всегда есть чему поучиться, например, я хорош как веб-дизайнер, но есть много людей намного лучше меня, но я… это не имеет значения, например, даже если я заканчиваю веб-сайт, и это довольно просто, я всегда оглядываюсь назад и говорю: «Посмотрите, как я занимаюсь кодированием», мне приятно, надеюсь, вам хорошо.

Хватит, пошли и доделаем последние кусочки. Я собираюсь обернуть всех остальных этих парней тегами. Итак, я скопирую это, вставлю несколько курсоров, где? Только здесь и один только там. Удерживая, на моем Mac это Alt, извините, на моем Mac это клавиша Option. Щелкните дважды. На вашем компьютере это, вероятно, Alt, но помните, что вы можете использовать несколько курсоров, вы можете пойти и проверить, что это здесь. Поставьте пробел, я вставлю это. Я верну его табуляцией, чтобы оно было там, где я хочу. Я собираюсь заложить все это. Мультикурсоры удобны, верно? Примерно там, а потом я закрою свой А-тег. Так что я сделаю это несколькими курсорами, и я собираюсь поместить это в свой A-тег. Закрытие на букве А. Поехали. Хороший.

Ладно, ты, ты, ты, ты… проверь в браузере, не сломалось, все кликабельно. Никуда не уходит. Если вы думаете: «Чувак, это… хэштег не работает, просто набери http://www. Зайди на byol.me, это мой сайт. И если ты еще этого не сделал, по крайней мере, перенаправит вас на мой сайт. Давайте посмотрим, нажмите, убедитесь, что вы нажали «Сохранить», нажмите. Card2, Дэн. Ах, Card2. 

Хорошо, этого достаточно для этого видео и махинаций. Увидимся в следующем видео Привет, я

Тег HTML div

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


Пример

Раздел

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






 

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


 

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



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

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

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

Тег

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

Тег

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

Тег

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

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

ярлык!

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

.

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

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

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

Тег

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

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

Тег

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

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

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

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

Ссылка HTML DOM: Div Object

Настройки CSS по умолчанию

Большинство браузеров отображают элемент

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

Пример

div {
  display: block;
}

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

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


ВЫБОР ЦВЕТА

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

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

No related posts.

Автор записи

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

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