Wordpress 导航栏中围绕一个 link 的边框

Question

我想弄清楚如何在我的 Wordpress 导航中将 1px 边框放在 link 周围。我在上面找到了一个类似的 post，但它不在 Wordpress 中，所以它没有太大帮助，但这就是我想为我的 Go Virtual link 做的：

当我使用代码时：

.menu-item-1864 {
border: 1px solid #000;
}

我明白了：

我只想要围绕单词而不是整个框的边框。

Answer 1

您菜单中的每个 link 都在一个 li 标签中，该标签在其他 class 中具有唯一的 class link。例如，它可能看起来像这样：

<ul id="primary-menu" class="nav-menu">
  <li class="menu-item menu-item-24"><a ...>Word</a></li>
</ul>

找到您要定位的列表项，然后为此添加您的 CSS。在上面，它会是这样的：

.menu-item-24 {border: 1px solid #000;}

更新

您的主题不允许按原样进行。您需要更改列表项上的 spacing/padding 和 link。按照您当前主题的设置方式，您的 links 在顶部有大量填充以使其垂直居中。您需要 trim 在顶部填充一些，在底部添加一些，然后调整列表项的大小以使其再次适合。

您可以在列表项上使用背景色来代替边框。如果您不知道如何调整 paddings 和 margins 等，那将实现类似的 "call out" 效果

Answer 2

您想使用第 nth-child，因为如果您尝试使用特定于 WordPress 的 class/id，如果您使用 Joe 的回答编辑菜单，它可能会发生变化。

.nav-menu li:nth-child(4) {border: 1px solid;}

Answer 3

问题是 link 与菜单的高度相同。快速浏览该站点后，我注意到 link 中有 span 标签。因此，您可以更改选择器以设置内部跨度的样式。然后，您可以为呼吸空间添加一些填充物。像这样。

.menu-item-1864 span {
  border: 1px solid black;
  padding: 5px;
}

Border around one link in Wordpress Navigation bar