0

下面的代码不起作用

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

我想他们应该在悬停时水平排列。

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

4

4 回答 4

1

我不确定你是否朝着正确的方向前进。

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

于 2013-11-10T19:21:31.870 回答
0

虽然这个效果有点奇怪，但试试这个方法：

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

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

您尝试过的方式不是将锚更改为内联，而是更改为列表项。问题是您将 display: inline 设置为仅一个“li”，这不适用于其他项目。您需要将所有“li”内联在整个列表 (ul) 的悬停上。

于 2013-11-10T19:14:09.170 回答
0

li您需要在悬停时将其应用于所有ul

演示http://jsfiddle.net/LstNS/26/

ul
{
list-style-type:none;
margin:0;
padding:0;
}
ul:hover li
{
display:inline;
font-size:30px;
}
于 2013-11-10T19:16:20.163 回答
0

对不起，我不明白你的问题。你想内联你的链接吗？如果是这样，请为您的 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>
于 2013-11-10T19:27:38.943 回答