Якорь в прямоугольнике всего элемента

Question

Якорь в прямоугольнике всего элемента

0

У меня есть список, созданный следующей разметкой

<ul class="menu">
    <li><a href="#">Bucuresti</a></li>
    <li><a href="#">Sighisoara</a></li>
    <li><a href="#">Tuzla</a></li>
    <li><a href="#">Comorova-Neptun</a></li>
    <li><a href="#">Maramures</a></li>
    <li><a href="#">Sinaia</a></li>
</ul>

Моя проблема заключается в том, что привязка действует только на ограничивающий прямоугольник, созданный тегом a, как показано ниже:

Я хочу, вместо этого, привязать весь тег li. Раньше я <a href="#"><li>Bucuresti</li></a> li внутри тега привязки (<a href="#"><li>Bucuresti</li></a>), но кто-то сказал мне, что это неправильно. Что еще я могу сделать, чтобы получить эффект, который я хочу, не форсируя синтаксис HTML?

Victor 06 май 2014, в 22:33

Источник

Теги:

html

css

3 ответа

1

У вас есть CSS, чтобы ваши элементы <li> были размером и формой, которую вы хотите. Очень вероятно, что вы можете выполнить одно и то же, применив этот стиль к элементам <a> элементам <li>.

jsfiddle.net/92KKa

gilly3 06 май 2014, в 18:16

0

кто-то ul.menu li a { display: block; } комментарий с ul.menu li a { display: block; } и это работает. Я попросил немного объяснений.
Victor 06 май 2014, в 19:47
0

@Victor - display: block может работать прекрасно, все зависит от вашего CSS для <li> . Я обновил jsfiddle из своего ответа версией, которая также сравнивает просто добавление display: block к ссылкам: jsfiddle.net/92KKa/1 . Вы можете видеть, что это работает, но в моем случае это не заполняет <li> . Это не будет точным решением для каждого случая.
gilly3 06 май 2014, в 20:07

0

добавьте этот стиль в тег привязки.

a{
  display:block;
}

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

Green Wizard 06 май 2014, в 17:44

Ещё вопросы

кто-то ul.menu li a { display: block; } комментарий с ul.menu li a { display: block; } и это работает. Я попросил немного объяснений.
@Victor - display: block может работать прекрасно, все зависит от вашего CSS для <li> . Я обновил jsfiddle из своего ответа версией, которая также сравнивает просто добавление display: block к ссылкам: jsfiddle.net/92KKa/1 . Вы можете видеть, что это работает, но в моем случае это не заполняет <li> . Это не будет точным решением для каждого случая.

j08691 · Accepted Answer · 2014-05-06T17-11-00.000Z

Ссылки (<a>) являются встроенными элементами по умолчанию, поэтому они занимают ширину их содержимого. Установив их на уровень блокировки вместо ul.menu a {display:block;}, они по умолчанию будут использовать всю ширину своего содержащего элемента, и вы можете дать им возможность расширить их высоту.