能否在span标签内嵌套一个列表？

Question

我知道<span>标签是内联元素，而<li>是块级元素。但是，我们有一个使用<span>标签的工具提示，并且我们想将该工具提示中的文本变为列表。然而，在<span>中放置<ul><li>在所有浏览器中都不起作用（并且它是无效的）。

这是HTML代码：

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

有可能有一个解决方法吗？

- catandmouse

---

不确定这是否有效...但是尝试在 span 标签上应用 display:block ？ - Zomxilla

你尝试过在 span 标签内嵌套列表吗？ - user5306470

它必须在一个span标签内吗？你能否将它放在一个div标签内，并通过样式使其表现得像一个span标签？这样做可以使其有效，并且可能工作得更好。 - Speckle

Answer 1

虽然在这种情况下我不会太担心无效代码，因为你已经知道了它的存在，但如果 ul li 在某些代码中出现问题，你可以尝试以下方法，虽然这也可能是无效的：

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

- Jason Gennaro

Answer 2

我认为你可能在寻找的技术答案是，提示文本应该放在锚点标签本身的title属性中。

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

虽然它还不够“美观”，但语义上更接近您要查找的内容。此外，您可以使用JavaScript从锚标记中提取该标题值，以便进行更漂亮的操作。

- St.G

Answer 3

只需使用一个类：

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

- user5965902

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

- Paul