带有居中徽标的导航

Question

我正在使用动态内容 (WordPress)，并希望将徽标置于列表中间，例如：http://www.munto.net/queed-v1/。

我对其进行了测试，并且我的理论有效，前提是两边的项目数量相同......但如果它们不同，则会破坏导航。

您可以在http://joshrodgers.com/ 看到一个实时示例。

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

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

页面代码：

<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 解决方案。

谢谢， 乔什

Answer 1

从设计的角度来看，我可能会考虑将徽标设为主页链接。许多网络用户习惯于单击徽标并将其带回家。您仍然可以在徽标下方加入主页文本。

我可能不会使用您的 margin-right: 200px 方法来不覆盖徽标，您在该列表项之前更改的任何内容都会移动边距。

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