purecss 纯菜单项无法正常工作答案

【问题标题】：purecss pure-menu-item doesn't work properlypurecss 纯菜单项无法正常工作
【发布时间】：2020-12-06 03:06:13
【问题描述】：

此菜单代码是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%，我觉得这有点奇怪。是这个问题吗？

【问题讨论】：

也许我误解了这个问题，但它似乎工作正常，请参阅jsfiddle.net/yr4hgvr1。
是的。我添加为 sn-p 并且在这里也可以正常工作。但是如果你只把它放在一个 html 文档中它会失败......我不知道为什么
您是否正在加载任何其他 CSS 样式？
不，这是我正在运行的确切代码
好的。 sn-p 现在有完整的代码

标签： html css yui-pure-css

【解决方案1】：

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

有关如何构建 HTML 文件的更多信息，请参阅 this page。

【讨论】：

好的，成功了。惊人的！你能说出为什么高度会失败吗？为什么 doctype 与此样式相关？
doctype 告诉浏览器您正在使用哪个版本的 HTML。如果您完全忽略它，浏览器将使用 quirksmode，这可能会导致您的代码出现各种问题。有关详细信息，请参阅 stackoverflow.com/q/6076432/2126792 和 en.wikipedia.org/wiki/Quirks_mode

【解决方案2】：

我在使用纯菜单项时遇到了同样的问题。它确实有100% 的高度。我通过将style="height:20pt" 添加到菜单所在的 div 来覆盖该高度。顺便说一句，我使用了水平菜单。

【讨论】：

【解决方案3】：

我在我的自定义 app.css 中添加了覆盖纯 css

.pure-menu-item { height: inherit; }

【讨论】：