Я знаю, что тег <span> является встроенным элементом, а <li> является блочным элементом. Однако у нас есть всплывающая подсказка, в которой используется тег <span>, и мы хотели бы превратить текст внутри этой всплывающей подсказки в список. Однако размещение <ul><li> внутри span работает не во всех браузерах (и это недопустимо).
Это HTML-код:
<a class='tooltip'>Text<span>Text that we want to become a list</span></a>
Возможна ли работа?
display:block к тегу span? 18.07.2011 Хотя я бы не стал сильно беспокоиться о недопустимом коде в этом случае, учитывая, что вы знаете об этом, если ul li нарушает какой-то код, вы можете сделать следующее, что также, вероятно, недопустимо:
<a class='tooltip'>Text<span>List item 1<br />
List item 2<br />
List item 3</span></a>
Я думаю, что технический ответ, который вы могли бы искать, заключается в том, что текст всплывающей подсказки должен находиться внутри атрибута title самого тега привязки.
<a href="link.htm" title="•List item 1 •List item 2 ">Text</a>
Это все еще не «красиво», но семантически это ближе к тому, что вы ищете. Кроме того, вы можете использовать javascript, чтобы вытащить это значение заголовка из тега привязки, чтобы сделать что-то более красивое.
Попробуй это. Скорее всего, если вы хотите поместить блочный элемент внутрь встроенного элемента, вы действительно хотите, чтобы они оба были блочными элементами:
<a class='tooltip' style="display: block;">Text
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</a>
Или для всех ваших всплывающих подсказок:
a.tooltip{
display: block;
}
Просто используйте класс:
<ul class='melikenachos'>
</ul>
