悬停时<li>标签内的非法<br>或<p>的替代方案？

Question

有没有人建议在<li>包含悬停弹出伪类的标签中创建段落类型的行空间？

我<span>弹出一个弹出a:hover的文件,我希望弹出的文本分为两段.它适用<br>于FF,但我想做正确的事(现在我发现它是错的!)......

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

Answer 1

在<br>内部<a>或者里面没有任何问题<span>.根据HTML 4.01规范,它完全有效.

编辑:<li>可以包含<p>,<br>以及其他任何东西.

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

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

关于<a>它说:

• A可以包含inline除外A
• inline... 往上看

Answer 2

您的问题可能是由于您错误地使用了 <span> 标签。

Span 应该是内联元素，并且您将其样式设置为块元素。诚然，您可以通过添加正确的样式来强制跨度充当块元素，但这可能并不总是受到各种浏览器的支持。

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