0

纯 css 纯菜单标题与 Firefox 中的项目不对齐？要在 Firefox 上运行它，请访问http://purecss.io/layouts/marketing/。'YOUR SITE' 纯菜单标题高于纯菜单项，但在 Chromium 和 Opera 中对齐良好。类“标题”也不在

<link rel="stylesheet" href="/combo/1.18.13?/css/layouts/marketing.css">?
4

3 回答 3

1

您需要修复它float:left的“您的网站”（ ）.home-menu .pure-menu-heading

在 Firefox 中发生这种情况的原因（根据这个答案Firefox 使用浮动和溢出隐藏的意外换行- 并且还检查了）是 Firefox 将默认设置white-space为nowrap.

因此将包装器 div 设置.pure-menu.pure-menu-fixed为white-space:normal也可以解决此问题，实际上可能对您来说是一个更好的解决方案

于 2016-12-25T07:30:46.580 回答
1

只需添加float: left到.pure-menu-heading. 喜欢：

.pure-menu-heading {
  float: left;
}

希望这可以帮助！

于 2016-12-25T07:31:31.770 回答
0

如下更改您的 HTML

<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tour</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sign Up</a></li>
    </ul>
<a class="pure-menu-heading" href="">Your Site</a>     
</div>

在 ul 之后放置锚标记

于 2016-12-25T07:41:11.110 回答