是否可以将列表放入 span 标签中？

发布于 2024-11-25 01:00:52 字数 408 浏览 1 评论 0原文

我知道标签是内联元素，而

是块元素。但是，我们有一个使用标记的工具提示，我们希望将该工具提示内的文本放入列表中。但是，将

放入 span 中并不适用于所有浏览器（并且无效）。

这是 HTML 代码：

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

有可能的解决方法吗？

原文

I'm aware that <span> tag is an inline element while <li> is a block element. However, we have a tooltip that uses a <span> tag and we'd like to make the text inside that tooltip into a list. However, putting <ul><li> inside span doesn't work in all browsers (and it's invalid).

This is the HTML code:

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

Is there a possible work around?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笑梦风尘 2024-12-02 01:00:52

虽然我不会太担心这种情况下的无效代码，但鉴于您知道这一点，如果 ul li 破坏了某些代码，您可以执行以下操作，这也可能是无效的：

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

Although I would not worry to much about invalid code in this instance, given that you know about it, if the ul li is breaking in some of the code, you could do the following, which is also probably invalid:

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

回复收藏 0 原文

℡Ms空城旧梦 2024-12-02 01:00:52

我认为您可能正在寻找的技术答案是工具提示文本应该位于锚标记本身的 title 属性内。

<a href="link.htm" title="•List item 1 
 •List item 2 
">Text</a>

它仍然不是“美丽的”，但从语义上讲它更接近您正在寻找的东西。另外，您可以使用 javascript 从锚标记中提取标题值来执行更漂亮的操作。

I think the technical answer you could be looking for is that the tooltip text should go inside the title attribute of the anchor tag itself.

<a href="link.htm" title="•List item 1 
 •List item 2 
">Text</a>

It's still not "beautiful" but semantically it's closer to what you're looking for. Plus you can use javascript to pluck that title value from the anchor tag to do something prettier with.

回复收藏 0 原文

一影成城 2024-12-02 01:00:52

试试这个。如果您想将块元素放入内联元素中，您可能确实希望它们都是块元素：

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

或者对于所有工具提示：

a.tooltip{
    display: block;
}

Try this. Chances are if you want to put a block element inside an inline element, you really want them both to be block elements:

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

Or for all your tooltips: