Question

我想弄清楚如何在我的Wordpress导航中围绕一个链接放置1px边框。我发现了一个类似的帖子，但它不是在Wordpress中，所以它没有太多帮助，但这是我想要为我的Go Virtual链接做的事情： enter image description here

当我使用代码时：

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

我明白了： enter image description here

我希望边框只是单词而不是整个框。

Answer 1

问题是链接与菜单的高度相同。快速浏览一下网站后，我注意到链接中有span标签。所以你可以改变你的选择器来调整内部的范围。然后你可以为呼吸室添加一些填充物。这样的事情。

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

enter image description here

Answer 2

菜单中的每个链接都在li标记中，除其他类外，该标记还包含该链接的唯一类。例如，它可能如下所示：

<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;}

<强>更新

您的主题不会允许这样。您还需要更改列表项和链接上的间距/填充。您当前主题的设置方式，您的链接在顶部有大量填充，以垂直居中。您需要在顶部修剪一些填充，在底部添加一些填充，然后调整列表项的大小以使其再次适合。

您可以在列表项上使用背景颜色代替边框。如果您不知道如何调整填充和边距等，那将会产生类似的“呼出”效果。

Answer 3

你想使用nth-child，因为如果你尝试使用WordPress特定的类/ id，如果你使用Joe的答案编辑菜单，它会改变。

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