2016-04-03 2 views
0

Я пытаюсь настроить меню на сайте Wordpress.com (принадлежит клиенту).Добавление пробелов/пробелов после некоторого текста

URL-адрес является: https://chainecharlotteorg.wordpress.com/

Это главный навигационный бар в верхней части сайта.

Я могу добавить в элемент меню класс CSS. Используя этот класс, я изменил фоновый цвет. Но я хочу, чтобы фон имел пространство как минимум до и после текста manu item. Прокладка не влияет.

Мне удалось получить место перед текстом, указав width на нечто большее, чем текст. Это создавало пространство перед текстом. Как показано здесь:

Example

Но я не смог найти способ, чтобы установить некоторый пробел после «Пожертвовать», так что синий фон выходит за его пределы. Я бы подумал, что это будет сделано, но в этом случае это не так.

От переднего конца, вот код участвуют:

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

Кто-нибудь есть какие-либо предложения?

+0

у вас есть URL я бросим быстрый взгляд еще jsfiddle бы хорошо могу? –

+0

URL добавлен. Это https://chainecharlotteorg.wordpress.com/ – inspirednz

+0

, чтобы вы хотели, чтобы они были более разбросаны или пространство слева осталось? как это: до того, как элемент сделал это? дайте мне знать, что вы хотите, и я вставлю свой ответ ниже –

ответ

0

Фрагмент кода - это единственный способ помочь вам, а также понять эту проблему. попробуйте

margin-right: 30px; 
+0

Все это находится в трудных пределах сайта wordpress.com. Поэтому я подозреваю, что у меня нет доступа к коду обычным способом. Но я подозреваю, что проверка кода с передней стороны (просмотр https://chainecharlotteorg.wordpress.com/) может показать, что вам нужно. Маржа и отступы не действуют. Я предполагаю, что они не являются атрибутами уровня класса, а блочным уровнем? (извините, если моя терминология css неверна). – inspirednz

0

Ну, как супер очевидно, как это решение было использовать !important имущество для того, чтобы отдать приоритет моего класса атрибутов над теми, определенные в другом месте (вне моей досягаемости) в теме WordPress.com ,

Далее, поэтому, в настоящее время работает, как я первоначально был предвидя:

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