在悬停时，<li>标签中使用非法的 或标签的替代方案是什么？

Question

在悬停时，<li>标签中使用非法的 或标签的替代方案是什么？

listpopuphoverline-breakspseudo-class

9

有没有关于在包含悬停弹出伪类的

标签内创建段落类型行间距的建议？

我有一个标签，当鼠标悬停在标签上时会弹出该标签，并希望弹出的文本被分成2个段落。在火狐浏览器中使用
标签可以实现此目的，但我想做正确的事情（现在我已经发现这是错误的！）...

HTML:

<div id="rightlist">
  <ul>
      <li><a href="">List item
          <span>
             words words words that are "paragraph" 1 of List item
             <br><br>
             different words that make up "paragraph" 2 of List item
          </span></a></li>

CSS：

#rightlist {
margin-top: 10px; margin-right: 5px; width: 387px ; height: 239px ;
background-color: #7EBB11 ;
display: table-cell; 
z-index: 100 ;
    float: right ;
}

#rightlist ul {
  text-align: left;
margin: 0;
   margin-top: 6px;
font-family: sans-serif;
font-size: 20px ;
color: black ;
}

#rightlist a 
{
    display: table-cell;
text-decoration: none; color: black; 
background: #7EBB11 ; 
}

/*appearance of the <a> item (but before the <span> tag) on hover*/
#rightlist a:hover {
color: white;
}

/*appearance of the spanned content within <a></a> tags when not hovered */
/* %%%%% important - keep position:absolute in this div %%%%% */
#rightlist a span {
display: none;
position: absolute ;
margin-left: -412px;
top: -10px; left: 10px; padding: 10px ;
z-index: 100;
width: 380px; height: 222px; 
color: white;  background-color: #7EBB11;
font: 0.75em Verdana, sans-serif; font-size: 13px ; color: black;
text-align: left;
}



/*appearance of spanned content within <a> tags when hovered*/
#rightlist a:hover span {
display: table-cell ;
}

- pjkoc

2

你为什么认为这些标签在列表项中是非法的？ - inferis

我猜测 <ul> 对其直接子元素（应该只有 <li>）的限制可能暗示着相同的限制适用于 <li>。但实际上并不是这样的。 - konrad

5个回答

2

您的问题可能是由于您错误地使用了标签。应该是内联元素，而您正在将其样式设置为块级元素。尽管可以通过添加正确的样式强制使表现为块级元素，但这可能并不总是被各种浏览器所支持。

理想情况下，您应该使用div代替。然后，您可以使用p标签或进一步的div标签来指示段落（理想情况下使用p，因为从语义上讲它们实际上是段落，而不是无关的文本块）。

- inferis

2

但是我能在<li>标签中放置<div>标签吗？我认为这违反了规范，不是吗？ - pjkoc

据我所知，HTML或XHTML规范中没有禁止它们的任何内容。在 XHTML 规范中有一些禁止事项的列表[http://www.w3.org/TR/xhtml1/#prohibitions]，但是其中并未提及列表项内部的 div 元素。 - inferis

实际上，如果您查看DTD（<!ELEMENT LI - O (%flow;)* -- list item -->），您会注意到根本没有任何禁止规定，我认为这些将由例如-(DIV)指示。 - inferis

1

你可以在那里再加一个 span 标签作为“假”的 p 标签：

  <li><a href="">List item
      <span>
         <span>words words words that are "paragraph" 1 of List item</span>
         <span>different words that make up "paragraph" 2 of List item</span>
      </span></a></li>

在你的 CSS 中：

#rightlist span span {display:block;margin:...}

注意：你声明的任何关于#rightlist span的内容都会适用于#rightlist span span，因此你可能需要覆盖#rightlist span span中的一些规则。

- Oli

Tx Oli，但这会将两个块作为独立但同时发生的实例放在一起悬停。如果每个文本段落的大小已知（我可以指定＃2的大小和位置，使其位于＃1下方等），那么就可以了，但不幸的是情况并非如此。仍在苦苦思索中... - pjkoc

-1

为什么它是“错误”的？

你的br标签可能应该编码为：

 <br />

- Adrian

W3C强烈建议在4.01文档中避免使用该内容。 - pjkoc

在哪里？- 我非常愿意学习！ - Mesh

这是我在包含HTML代码的页面收到的验证报告中看到的。你是对的，应该规定为4.01版本，抱歉！ - pjkoc

-4

为什么你现在的方法是错误的？

你可以尝试这个。

<span>
  <p>words words words that are "paragraph" 1 of List item</p>
  <p>different words that make up "paragraph" 2 of List item</p>
</span>

- Kim

不允许在 中使用。 - Greg

这篇文章的重点就在于此，Kim。你不能将块级元素（div、p、ul、ol等）放在a、span等元素内部。这违反了规范。 - Oli

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RoBorg · Accepted Answer

使用   标签放在 <a> 或  内是没有问题的。根据HTML 4.01规范，这是完全有效的。

编辑: <li> 可以包含 、  和几乎任何其他元素。

该规范有点难以阅读，但基本上它说:

LI 可以包含 block 或 inline
block 由 P + 其他一些东西组成
inline 由 special + 其他一些东西组成
special 由 A + BR + 其他一些东西组成

关于 <a>，它说：

A 可以包含除了 A 的 inline
inline... 见上面

在悬停时，<li>标签中使用非法的<br>或<p>标签的替代方案是什么？