【问题标题】:css top nav - left nav (menu), title in center, right side (more buttons) - howto?css 顶部导航 - 左侧导航(菜单),中心标题,右侧(更多按钮) - 如何?
【发布时间】:2013-11-21 12:29:49
【问题描述】:

我想要一个看起来像这样的顶部导航: div = [] , 空格 = .

[[menu-icon][logo]....[page title].....[some-icon][some-icon]]

因此菜单和徽标区域位于左侧。
页面标题在中间。
还有 2 个贴在右边的图标。

我尝试了几种方法,但没有一个对我有用。
我最好的解决方案是一切就绪,但链接/图标不可点击,文本“覆盖”了它们。

感谢任何帮助。

这是我的小插曲: http://plnkr.co/edit/CBnH6Ewa4QJTu5FBC2Mi

======编辑===== 感谢@Mark Simpson,我修复了 CSS 中的一个错字,并通过在中心部件上使用 z-index:-1 使标题栏居中并且链接可点击。
但我希望它的标题也可以点击。
我在某些页面上使用它。
有关如何使用 css 解决此问题的任何建议?

【问题讨论】:

    标签: css menu title navbar


    【解决方案1】:
    .navbar .center {
        width: 60%;
        margin: 0 auto;
        text-align: center;
    }
    
    .navbar .right {
        position: absolute;
        right: 0;
        top: 0;
    }
    

    见:http://plnkr.co/edit/1XLrK4Iuq6CPSYmGPDYn?p=preview

    【讨论】:

    • 完美运行的Ty。如果我希望中心区域也可以点击,是否还有解决方案?使用此解决方案,它位于 div 的“后面”,无法点击。
    • @samz 是的。我已经更新了我的答案。给它一个足够窄的显式宽度,使其不会覆盖图标。
    • @mark_simspon :最后一个建议是把标题放在中间,然后右边的图标会掉一行:(
    • @samz 抱歉,我再次更新了我的答案。如果有效,请接受正确的答案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-09-27
    • 1970-01-01
    相关资源
    最近更新 更多