在一些文本后添加填充/空格

Question

我正在尝试在Wordpress.com网站（属于客户端）中自定义菜单。

网址为：https://chainecharlotteorg.wordpress.com/

它是网站顶部的主导航栏。

我可以在菜单项中添加 CSS类。使用该类我改变了背景颜色。但我希望背景至少在manu项目文本之前和之后都有空间。填充没有效果。

通过将width定义为比文本宽的东西，我能够在文本之前获得空间。这具有在文本前面创建空间的效果。如下所示：

但是在“捐赠”之后我无法找到设置空间的方法，以便蓝色背景延伸到它之外。我本以为padding会这样做，但在这种情况下它不会。

从前端开始，这是涉及的代码：

<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="menu-nav-menu-container">
<ul id="primary-menu" class="menu nav-menu" aria-expanded="false">
<li id="menu-item-157" class="donate menu-item menu-item-type-post_type menu-item-object-page menu-item-157">
<a href="https://chainecharlotteorg.wordpress.com/donate/">Donate</a>
</li>
<li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122">
<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37">
<li id="menu-item-141" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-141">
<li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-140">
<li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93">
<li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101">
<li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38">
</ul>
</div>
</nav>

以下（从中）是特定于“捐赠”菜单项的代码：

<li id="menu-item-157" class="donate menu-item menu-item-type-post_type menu-item-object-page menu-item-157">
<a href="https://chainecharlotteorg.wordpress.com/donate/">Donate</a>
</li>

有人有任何建议吗？

Answer 1

代码段是任何人真正帮助您以及了解此问题的唯一方法。尝试

  margin-right: 30px;

Answer 2

嗯，正如这一点非常明显，解决方案是使用!important属性，以便优先考虑我的类属性，而不是wordpress.com主题中其他地方（超出我的范围）定义的属性。

因此，以下内容现在可以像我原先预期的那样工作：

.donate {
    padding: 20px !important;
    background: blue;
}