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

Question

我正在尝试自定义 Wordpress.com 站点(属于客户)中的菜单。

网址是:https://chainecharlotteorg.wordpress.com/

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

我可以向菜单项添加一个 CSS 类。使用那个类我改变了背景颜色。但我希望背景至少在菜单项文本前后有空间。填充没有效果。

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

但我一直无法找到一种方法来在“捐赠”之后设置一些空间，以便蓝色背景延伸到它之外。我原以为填充会这样做，但在这种情况下它不会。

从前端来看，这是涉及的代码:

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