Question

我正在尝试创建一个带有扭曲的基本水平菜单：在中间放置一个图像（徽标）。我已经看过几个关于如何使用填充或负边距或透明图像占位符和背景图像的示例。根据我的口味，它们太复杂了，然后我在Targeting Menu Elements using nth-child找到了一篇文章，几乎让我的解决方案起作用了！

我现在遇到的问题是间距问题。我左边有3个菜单项，右边有3个菜单项。我的直觉告诉我，这是一个简单的数学计算错误，但我尝试了不同的填充，对齐，边距和定位无济于事。

我需要以下内容：

[item] [item] [item] LOGO [item] [item] [item]

但我似乎无法摆脱这种情况：

[item] [item] [item] LOG [item] O [item] [item]

我已经使用css实现了这一点，并将徽标宽度的余量应用于第3个列表项的第n个子项。问题是除非所有菜单项的长度完全相等，否则它似乎与菜单的其余部分不一致。我有以下HTML：

<div id="header">
<div id="branding">
    <h1 id="site-title">
        <a href="#"><img width="200" height="145" alt="Diamond Logo" src="http://cowgirlexpressions.com/working/_TESTING/menu-split-logo.jpg" class="header-image" /></a>
    </h1>
    <nav class="menu" id="menu-primary">
        <div class="wrap">
            <ul class="menu-items" id="menu-primary-items">
                <li><a href="#">Bio</a></li>
                <li><a href="#">Résumé</a></li>
                <li><a href="#">Photos</a></li>
                <li><a href="#">Demos</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">News</a></li>
            </ul>
        </div>
    </nav>
</div>

我的CSS是：

body { background-image: none; background-color: #000; } 


/* === Header & Site Title === */
#header {padding-top: 0;}
#branding {padding: 0; margin: 0; line-height:150px; height:150px; text-align: center; }
#site-title {line-height: 150px;}


nav.menu ul { margin: 0; padding: 0; word-spacing: -4px; }
nav.menu li { display: inline-block; background-color: rgba(125, 125, 125, 0.3); }
nav.menu li a {
    color: #000;
    display: block;
    font-size: 24px;
    line-height: 36px;
    margin: 0;
    padding: 5px 18px; 
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
}
nav.menu li a:hover { background-color: rgba(255, 255, 255, 0.3); }


/* === Main Menu === */
#branding nav#menu-primary {
    margin: -220px auto 0px auto;
    width: 940px; /*840px?*/ }
    #branding ul#menu-primary-items li { font-weight: bold; text-align: center; text-transform: uppercase; position: relative; }
        #branding ul#menu-primary-items li:nth-child(3) { margin: 0 0 0 0;  }
        #branding ul#menu-primary-items li:nth-child(4) { margin: 0 0 0 200px; }
        #branding ul#menu-primary-items li a { color: #809CAD; text-decoration: none; }
            #branding ul#menu-primary-items li a:hover { color: #BBAD9E; }

更改 #branding nav＃menu-primary 类的宽度似乎会影响这一点，但我似乎无法获得正确的组合。另外，我的内容区域的最大宽度为1200.我是否需要将菜单容器宽度设置为匹配？还是100％？我可以将整个菜单中的填充应用20px并将其移位，但这似乎不是一个干净的解决方案，而且它使菜单不在页面内容的其余部分上方。我应该在第n个子项目上使用保证金/填充还是有更好的（清洁）方式来执行此操作？

请参阅此 WORKING FIDDLE 以更好地了解我的问题。非常感谢你的帮助！

使用nth-child分割水平菜单？

0 个答案: