Question

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

我在上弹出了a:hover，我希望弹出的文字分为2段。它适用于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

在 或<a>内感到错误。根据{{3}}，它完全有效。

修改：<li>可以包含， 以及其他任何内容。

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

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

关于<a>，它说：

A可以包含inline除A

inline

{{1}} ...见上文

Answer 2

你可以在那里粘贴另一个跨度作为“假”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中的某些规则。

Answer 3

您的问题可能源于您正在使用＆lt; span＆gt;标签不正确。

Spans应该是内联元素，你将它设置为样式，就像它是一个块元素一样。不可否认，您可以通过添加正确的样式来强制跨度表现为块元素，但这可能并不总是受到各种浏览器的尊重。

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

Answer 4

为什么'错了'？

你的br标签应该编码为：

 <br />

Answer 5

为什么你目前的方式错了？

你可以试试这个

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

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

5 个答案: