Перепишите этот код: кликабельные div

StackOverflow https://stackoverflow.com/questions/278278

  •  07-07-2019
  •  | 
  •  

Вопрос

Я бы хотел это изменить. 

<a href='foo'> 
    <div> Moo </div>
</a>

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

Кроме того, есть " a { display:block; } " законный способ обойти проверку?

Это было полезно?

Решение

Почему бы не использовать < span > вместо < div > и установить display: block на обоих элементах?

Кроме того, чтобы ответить на ваш последний вопрос: я не верю, что добавление display: block; к вашему якору сделает его успешным. Валидатор проверяет, соблюдаете ли вы (X) правила HTML, а не то, как представить страницу пользователю.

Другие советы

Возможно, вы захотите поместить div вне a, если это только для целей отображения, если только важно, чтобы внешняя граница была кликабельной. Либо это: 

<div class="dbl_border_links"><a href="blah">Blah text</a></div>

или это: 

<a class="dbl_border_links" href="blah"><span>Blah text</span></a>

будет работать, и вы можете использовать что-то вроде этого: 

<style>
  .dbl_border_links, .dbl_border_links>* {
    display: block;
    border: 1px solid;
    padding: 1px;
  }
  .dbl_border_links {
    border-color: red;
  }
  .dbl_border_links > * {
    border-color: blue;
  }
</style>

чтобы указать стили. Лично я бы использовал <=>, содержащий <=>, но любой подход работает.

Обычно я считаю тег <a > особым случаем для этой цели. Вы должны быть в состоянии применить это к чему угодно - это после некоторого рода гипертекста (<tr > приходит на ум хорошим примером). Но если вам нужно где-то передать валидатор, я понимаю.

Не могли бы вы использовать обработчик javascript onclick для div и полностью исключить привязку?

Во-первых, конечно, нет ничего плохого в том, чтобы дать отображение якоря: block; Я бы сказал, что это одна из наиболее распространенных вещей, которые люди делают с CSS и которые полностью соответствуют стандартам. Во-вторых, существует несколько способов достижения двойной границы элемента HTML. Во-первых, ознакомьтесь с & Quot; outline & Quot; свойство:

http://webdesign.about.com/od/advancedcss/a /outline_style.htm

Следует признать, что это будет работать только в более современных браузерах, но должно изящно ухудшаться, поскольку контур не занимает места на странице. Если содержимое ссылки должно быть изображением, вы можете просто указать & Lt; a & Gt; немного отступов и цвет фона, а также обычная рамка (другого цвета), чтобы создать впечатление двойной границы. Или придать изображению собственную границу. Конечно, вы также можете сделать что-то в соответствии с вашей первоначальной идеей, хотя вложите HTML-код наоборот и просто назначите разные границы для каждого элемента. Или вы можете использовать встроенный элемент внутри ссылки (например, & Lt; span & Gt; или & Lt; em & Gt; или что-то еще), который вы также установите для отображения: block; (да, это также верно!). Удачного кодирования!

Если я правильно понимаю ваши намерения, вы должны разместить, как уже упоминалось, div вне якоря, и, чтобы получить такое же представление, сделать якорь width:100%;height:100%. Межбраузерный пробег может варьироваться. Кроме того, вы можете полностью сбросить div и дать якорь display:block;

Что именно вы пытаетесь сделать?

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top