Можно ли поместить список в тег span?

Question

Мне известно, что тег <span> является встроенным элементом, а <li> является элементом блока. Однако у нас есть всплывающая подсказка, которая использует тег <span>, и мы хотели бы превратить текст внутри этой подсказки в список. Однако размещение <ul><li> внутри span не работает во всех браузерах (и это недопустимо).

Это HTML-код:

<a class='tooltip'>Text<span>Text that we want to become a list</span></a>

Есть ли возможность обойти?

Answer 1

Хотя я бы не стал сильно беспокоиться о недопустимом коде в этом случае, учитывая, что вы знаете об этом, если ul li ломается в некотором коде, вы можете сделать следующее, что также, вероятно, неверно:

<a class='tooltip'>Text<span>List item 1<br />
                             List item 2<br />
                             List item 3</span></a>

Answer 2

Просто используйте класс:

<ul class='melikenachos'>
</ul>

Answer 3

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

<a href="link.htm" title="&bull;List item 1 &#10; &bull;List item 2 &#10;">Text</a>

Это все еще не "красиво", но семантически это ближе к тому, что вы ищете. Кроме того, вы можете использовать javascript, чтобы извлечь это значение заголовка из тега привязки, чтобы сделать что-то более красивое.

Answer 4

Попробуй это.Скорее всего, если вы хотите поместить блочный элемент внутри встроенного элемента, вы действительно хотите, чтобы они оба были блочными элементами:

<a class='tooltip' style="display: block;">Text
    <div>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </div>
</a>

Или для всех ваших всплывающих подсказок:

a.tooltip{
    display: block;
}