Question

Pure css pure-menu-heading与Firefox中的项目不对齐？要在Firefox上运行此操作https://www.zabbix.com/documentation/3.2/manual/config/notifications/action/escalations。＆＃39;您的网站＆＃39; pure-menu-heading在纯菜单项目上方，但在Chromium和Opera中很好地对齐。还有班级标题＆＃39;

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

Answer 1

您需要.home-menu .pure-menu-heading修复它的“您的网站”（white-space）

在firefox中发生这种情况的原因（根据此答案Firefox unexpected line break using floats & overflow hidden - 并且还经过检查）是firefox将默认nowrap设置为.pure-menu.pure-menu-fixed。

所以将包装器div white-space:normal设置为undefined也可以解决此问题，实际上可能是更好的解决方案

Answer 2

只需将float: left添加到.pure-menu-heading即可。像：

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

希望这有帮助！

Answer 3

更改您的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

之后放置锚标记

纯css pure-menu-heading与Firefox中的项目不对齐？

3 个答案: