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

Alternatives to illegal <br> or <p> within <li> tags on a hover?

提问by Greg

Does anyone have a suggestion for creating paragraph-type line spaces within a <li>tag that includes a hovered pop-up pseudo-class?

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

I have a <span>that pops up on a:hoverand I want the text that pops up to be broken into 2 paragraphs. It works with <br>in FF but I want to do the right thing (now that I've discovered it's wrong!)...

我有一个<span>弹出的a:hover，我希望弹出的文本被分成 2 段。它适用<br>于 FF，但我想做正确的事情（现在我发现它是错误的！）...

html:

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:

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

采纳答案by inferis

Your problem may arise from the fact that you're using a <span> tag incorrectly.

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

Spans are supposed to be inline elements and you're styling it as though it were a block element. Admittedly you can force a span to behave as a block element by adding the right style, but this may not always be honoured by the various browsers out there.

Span 应该是内联元素，并且您将其样式设置为好像它是一个块元素。诚然，您可以通过添加正确的样式来强制跨度表现为块元素，但这可能并不总是被各种浏览器所尊重。

Ideally you should be using a div instead. You can then use either p tags or further div tags to indicate the paragraphs (ideally p, since semantically they actually are paragraphs rather than unrelated blocks of text).

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

回答by Greg

Err there's nothing wrong with having <br>inside <a>or <span>. It's perfectly valid according to the HTML 4.01 spec.

呃，有<br>inside<a>或<span>. 根据HTML 4.01 规范，它完全有效。

Edit: <li>can contain <p>, <br>, and pretty much anything else.

编辑：<li>可以包含<p>,<br>和几乎任何其他内容。

The spec is a bit hard to read but basically says:

规范有点难以阅读，但基本上说：

• LIcan contain blockor inline
• blockis made of P+ some other things
• inlineis made of special+ some other things
• specialis made of A+ BR+ some other things

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

Regarding <a>it says:

关于<a>它说：

• Acan contain inlineexcept A
• inline... see above

• A可以包含inline除了A
• inline... 看上面

回答by Oli

You could stick another span in there as a "fake" p tag:

您可以在其中粘贴另一个跨度作为“假” 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>

And in your css:

在你的 css 中：

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

Noteanything you declare for #rightlist spanwill apply to #rightlist span span, so you might need to override some of the rules in #rightlist span span.

请注意，您声明的任何内容都#rightlist span将适用于#rightlist span span，因此您可能需要覆盖#rightlist span span.

回答by Mesh

Why is it 'Wrong'?

为什么是“错”？

your br tag should perhaps be coded as:

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

 <br />

回答by Kim

Why is your current way wrong ?

为什么你目前的方式是错误的？

You can try this

你可以试试这个

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