此菜单代码是 http://purecss.io/menus/ 中的第一个示例.
但是效果不好:(
每个<li>元素彼此保持一屏距离。如果向下滚动，您会看到其他元素。
但它在 purecss.io/menus 页面中有效。我不知道为什么。
(这里当你运行时它也能正常工作......你必须用这段代码创建一个 html 文档，然后它会失败......)
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
</head>
<body>
<div class="pure-menu">
<span class="pure-menu-heading">Yahoo Sites</span>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a>
</li>
<li class="pure-menu-heading">More Sites</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Games</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">OMG!</a>
</li>
</ul>
</div>
</body>
</html>我看过 pure-menu-item有一个 height: 100% ，我认为这有点奇怪。这是问题所在吗？
最佳答案
您的 HTML 无效，您需要声明一个 doctype，例如:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" rel="stylesheet" />
</head>
<body>
<div class="pure-menu">
<span class="pure-menu-heading">Yahoo Sites</span>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a>
</li>
<li class="pure-menu-heading">More Sites</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Games</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">OMG!</a>
</li>
</ul>
</div>
</body>
</html>
参见 this page有关如何构建 HTML 文件的更多信息。
关于html - purecss pure-menu-item 不能正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29042613/