带居中徽标的导航

我正在使用动态内容（WordPress），并希望在列表中间放置一个徽标，如：http://www.munto.net/queed-v1/.

我测试了它，我的理论奏效了，前提是两边的项目数量相同。。。但如果它们不同，导航就会混乱。

您可以在以下位置看到一个示例：http://joshrodgers.com/.

我所做的是将我的徽标作为背景图像，并将其居中到我的无序列表中，然后我在每个列表项上设置一个宽度（这样，如果有超长的，它就不会扰乱导航），最后在第三个链接之后，我在列表项的右侧放置了一个200像素的边距（这样，徽标上就没有列表项了）。。。但正如我所说，如果项目的数量是偶数，这非常有效，如果项目等于奇数，这看起来很有趣。

不确定什么是最好的方法，那么，解决这个问题的最好方法是什么？

页面代码：

<html>
    <head>
        <title>Josh Rodgers - El Paso, Texas</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <ul>
            <li>Home</li>
            <li>About Us</li>
            <li class="example">super new lodge</li>
            <li>Programs</li>
            <li>Events</li>
            <li>Contact Us</li>
           <li>Contact Us</li>
        </ul>
    </body>
</html>

CSS样式：

/* Reset */
@import url("reset.css");
body {
    margin: 0 auto;
    position: relative;
    width: 1000px;
}
ul {
    background: #ff0000 url("images/example.jpg") top center no-repeat;
    height: 200px;
    margin: 0 auto;
    text-align: center;
    width: 1000px;
}
li {
    background: #ffff00;
    color: #ff0000;
    display: inline-block;
    font-size: 20px;
    padding: 20px 0;
    position: relative;
    top: 70px;
    width: 100px;
}
li.example {
    margin-right: 200px;
}

*我想在将其集成到WordPress之前，我会先研究一个普通的php解决方案。

谢谢，Josh

从设计的角度来看，我可能会考虑将徽标作为主页链接。很多网络用户习惯于点击这个标志，它会把他们带回家。你仍然可以把主页文字放在徽标下面。

我可能不会使用你的右侧边距方法：200像素不覆盖徽标，在该列表项之前你更改的任何内容都会改变边距。

最终，我建议重新考虑将徽标设置为背景图像，并将其作为列表项目之一。

相关内容

最新更新

热门标签：