替代品非法的 <br> 或 <p> 内 <li> 标签上的悬停?
-
06-07-2019 - |
题
任何人都不会有一个建议,创建第型线的空间内 <li>
标记包括徘徊弹伪类?
我有一个 <span>
持久性有机污染物在 a:hover
和我想要的文字持久性有机污染物分为2段。它的工作原理 <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 ;
}
解决方案
您的问题可能源于您正在使用&lt; span&gt;标签不正确。
Spans应该是内联元素,你将它设置为样式,就像它是一个块元素一样。不可否认,您可以通过添加正确的样式来强制跨度表现为块元素,但这可能并不总是受到各种浏览器的尊重。
理想情况下,您应该使用div代替。然后,您可以使用p标签或其他div标签来指示段落(理想情况下是p,因为从语义上讲它们实际上是段落而不是不相关的文本块)。
其他提示
犯错误没什么错了 <br>
内部 <a>
或 <span>
.这是完全有效的根据 HTML4.01规范.
编辑: <li>
可以包含 <p>
, <br>
, 和很多其他任何东西。
规范是一位很难阅读,但基本上说:
LI
可以包含block
或inline
block
由的P
+一些其他的东西inline
由的special
+一些其他的东西special
由的A
+BR
+一些其他的东西
关于 <a>
它说:
A
可以包含inline
除了A
inline
...见上
你可以在那里坚持另一个跨度作为“假” p tag:
<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
。
为什么'错了'?
你的br标签应该编码为:
<br />
为什么你目前的方式错了?
你可以试试这个
<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>
不隶属于 StackOverflow