html - CSS 导航重音背景图像不起作用

Question

我在stackoverflow上看了好几个问题，还是没找到答案……谷歌搜索也没用……

这是我的 CSS:

#nav {
    text-align:center;
    display: block;
    background-image: url(lines.png);
    background-repeat: repeat-x;
    font-family: Gabrielle;
    text-decoration: none;
}

最常见的问题是文件是否位于正确的文件夹中 - 我向您保证是的。该站点未上线，到目前为止我只使用本地文件。

这是随附的 HTML:

<div id="nav">
 <ul>
    <li><a href="kitchen.html">Kitchen &amp; Bath</a></li>
    <li><img src="nav-bullet.png"></li>
    <li><a href="interior.html">Interior Design</a></li>
    <li><img src="nav-bullet.png"></li>
    <li><a href="graphic.html">Graphic Design</a></li>
    <li><img src="nav-bullet.png"></li>
    <li><a href="cad.html">Auto CAD</a></li>
    <li><img src="nav-bullet.png"></li>
    <li><a href="modeling.html">3D Modeling</a></li>
</ul>

以防万一。

我正在尝试在导航栏的两侧制作“重音线”，但我不确定我的做法是否正确。这是一个“启发”了我的网站的链接……你会看到在他们导航的两边都有优雅的小线条。这些就是我想要创造的。

http://www.tinkeringmonkey.com/

正如我所说，也许我的做法是错误的。任何使现有代码工作的建议，或改进方法的建议都将不胜感激。

Answer 1

您必须为 nav 指定高度。指定行高也是一个好主意，这样 ul 中的文本垂直居中。

#nav {
    text-align:center;
    display: block;
    background-image: url(lines.png);
    background-repeat: repeat-x;
    font-family: Gabrielle;
    text-decoration: none;
    height: 20px;
    line-height: 20px;
}