Question

以下代码无效

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li:hover
{
display:inline;
font-size:30px;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

我认为它们应该在悬停时水平排列。

link- http://www.w3schools.com/css/tryit.asp?filename=trycss_display_inline_list

Answer 1

我不确定你是否正确的方向。

当用户将鼠标光标放在菜单项上时，您是否想要显示菜单项的位置？它不能工作。如果用户将鼠标放在“关于”项目上，它会在第一行中与其他元素一起消失并显示，但它会在光标下丢失悬停状态并返回，因此它返回悬停状态并在循环中再次移动到第一行。 ..

Answer 2

虽然这种效果有点奇怪，但请尝试这种方式：

ul {
  list-style-type:none;
  margin:0;
  padding:0;
}

ul:hover li { /*<<<here's the magic!*/
  display:inline-block;
  font-size:30px;
}

您尝试过的方式，您不是要将锚更改为内联，而是将列表项更改为内联。问题是您正在设置显示：内联到只有一个“li”，这不适用于其他项目。您需要在整个列表（ul）的悬停中内联所有“li”。

Answer 3

您需要在li

悬停时将其应用于所有ul

DEMO http://jsfiddle.net/LstNS/26/

ul
{
list-style-type:none;
margin:0;
padding:0;
}
ul:hover li
{
display:inline;
font-size:30px;
}

Answer 4

对不起，但我不明白你的问题。您是否想要内联链接？如果是这样，请尝试使用此css标记..

<style>
ul { list-style-type:none; margin:0; padding:0; }
ul li { display: inline !important; }
ul li a:link, ul li a:visited { text-decoration: none; color: #1122CC; }
ul li a:hover, ul li a:active { text-decoration: underline; }
</style>

锚元素在悬停时不会更改为内联

4 个答案: