Question

大家好，非常感谢所有为我提供帮助的人。

这是我的问题，请耐心等待，因为我对这一切都比较新。

我正在尝试为我的网站上的博客创建自定义WordPress主题，以便我的博客和我的网站的外观和感觉是无缝的。

现在我的问题是导航菜单。我有分隔导航链接的垂直线，我无法找到任何显示如何执行此操作的示例，或者在WordPress中有类似的内容，如果没有jQuery可以完成它。

如果有帮助，这里是菜单的html代码和css

<div id="HeaderNav">
                <ul>
                    <li class="link"><a href="/" class="nav about">about</a></li>
                    <li class="navsep">&nbsp;</li>
                    <li class="link"><a href="web.php" class="nav web">web</a></li>
                    <li class="navsep">&nbsp;</li>
                    <li class="link"><a href="photo.php" class="nav photo">photo</a></li>
                    <li class="navsep">&nbsp;</li>
                    <li class="link"><a href="#" class="nav blog">blog</a></li>
                    <li class="navsep">&nbsp;</li>
                    <li class="link"><a href="contact.php" class="nav contact">contact</a></li>
                </ul>
            </div>

CSS

#HeaderNav
{
    display:block;
    width:300px;
    height:24px;
    float:right;
    margin-top:70px;
    margin-right:37px;
}

#HeaderNav ul
{
    position:relative;
    display:block;
    float:right;
}

#HeaderNav ul li
{
    padding:0 4px;
    display:block;
    height:100%;
    float:left;
    margin:0 auto;
    text-align:center;
}

#HeaderNav ul li.navsep
{
    width:1px;
    height:24px;
    margin:0 7px;
    padding:0;
    background-color:#ffffff;
}

如果有人能以任何方式提供帮助，我将非常感激。

再次，非常感谢所有付出努力的人。

Answer 1

如果您想添加垂直线以分隔wordpress主题上的导航菜单选项，您可以使用一些CSS规则来完成。

。不需要jQuery

你走了：

li.menu-item a {
    border-right: 1px solid #fff;
    padding-right: 5px;
    padding-left: 5px;
}

Answer 2

他们只是在每个菜单后创建一个空元素：

<li class="navsep">&nbsp;</li>

然后用css设计它

#HeaderNav ul li.navsep
{
  width:1px;
  height:24px;
  margin:0 7px;
  padding:0;
  background-color:#ffffff;
}

在我的WordPress导航菜单中插入设计元素

2 个答案: