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

Question

Я знаю что <span> тег является встроенным элементом, в то время как <li> это блочный элемент. Тем не менее, у нас есть всплывающая подсказка, которая использует <span> тег, и мы хотели бы сделать текст внутри этой подсказки в список. Тем не менее, положить <ul><li> inner 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

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

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

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

Answer 3

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

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

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;
}