Как сделать тег <a>размером его родительского тега <li> для более крупного интерактивного региона?

Ответ 1

Как говорили другие

li a { display: block; }

должен достичь того, что вам нужно. Но вы также должны удалить любое дополнение из <li> и установить его на <a> вместо. Например:

li { padding: 0; }
  li a { display: block; padding: 1em; }

Ответ 2

В CSS:

li a {
     display: block;
}

Конечно, вы захотите сделать свой селектор более конкретным, чем это.

<ul>
    <li class="myClass">
        <a href="#">Link</a>
    </li>
</ul>

li.myClass a {
    display: block;
    background-color: #fdd; /* Demo only */
}

http://jsfiddle.net/userdude/jmj2k/

Ответ 3

Это сделает всю область доступной.

li a { display: block; }

Ответ 4

Попробуйте этот css

<я >

li{
    border:1px solid black;
    height:40px;
}

li a{
    border:1px solid red;
    display:block;
    height:100%;
}

Ответ 5

Если у вас есть такой же вопрос, вы можете просто добавить отступы в нужное место:

li {
  //remove any padding or margin attributes from here
}

li a {
  display: block;
  padding: 20px; //or however big you want the clickable area to be
}

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

Надеюсь, это поможет!

Ответ 6

li a{     
display: inline-table;
height:95%;    
width: 95%;
}

95, чтобы предвидеть любое допустимое значение поля или дополнение

Ответ 7

Еще один вариант, который я использовал, - это создать прозрачный png-образ в фотошопе и поместить его в тег привязки, сделать его положение абсолютным и увеличить его размеры, чтобы он соответствовал этому родительскому div, и вы могли бы иметь большую область с кликами.

<a href="test.html" />
 <img id="cover_img" src="cover.png" />
</a>

#cover_img {
display: block;
height: 200px;
width: 193px;
position: absolute;
}

Может быть полезно при определенных обстоятельствах.