0

我正在使用动态内容 (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 解决方案上工作。

谢谢，乔什

4

1 回答 1

1

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

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

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

于 2012-07-23T17:53:42.810 回答