Hinzufügen von Padding/Leerzeichen nach etwas Text

Ich versuche, das Menü in einer Wordpress.com-Website anzupassen (gehört zu einem Client).Hinzufügen von Padding/Leerzeichen nach etwas Text

Die URL lautet: https://chainecharlotteorg.wordpress.com/

Es ist die Hauptnavigationsleiste am oberen Rand der Webseite.

Ich kann eine CSS-Klasse zum Menüpunkt hinzufügen. Mit dieser Klasse habe ich die Hintergrundfarbe geändert. Aber ich möchte, dass der Hintergrund mindestens Platz vor und nach dem Text des Manu-Eintrags hat. Polsterung hat keine Wirkung.

Ich konnte Platz vor dem Text erhalten, indem ich die width zu etwas breiter als der Text definiert. Dadurch entstand Platz vor dem Text. Wie hier gezeigt:

Aber ich habe nicht in der Lage gewesen, einen Weg zu finden, etwas Platz nach „Spenden“ zu setzen, so dass der blaue Hintergrund darüber hinaus erstreckt. Ich hätte gedacht, Padding würde dies tun, aber in diesem Fall nicht.

Vom vorderen Ende, hier ist der Code beteiligt:

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

Mit dem folgenden (von den) auf "Spenden" Menüpunkt den Code spezifisch ist:

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

Hat jemand irgendwelche Vorschläge?

Quelle

2016-04-03 inspirednz

haben Sie die URL ich einen kurzen Blick darauf werfen kann auch ein jsfiddle wäre gut? –

URL hinzugefügt. Es ist https://chainecharlotteorg.wordpress.com/ – inspirednz

, also wollen Sie, dass sie ausgebreitet werden oder der Platz auf der linken Seite weg ist? Wie ist das: bevor das Element das macht? lassen Sie mich wissen, was Sie wollen und il fügen Sie meine Antwort unter –

Ein Code-Snippet ist die einzige Möglichkeit, Ihnen wirklich zu helfen und dieses Problem zu verstehen. versuchen

margin-right: 30px;

Quelle

2016-04-03 02:22:11 Maxwelll

Dies ist alles innerhalb der engen Grenzen einer Website wordpress.com. Ich vermute also, dass ich auf normale Art und Weise keinen Zugriff auf den Code habe. Aber ich vermute, die Überprüfung des Codes von der Front-End (Anzeigen https://chainecharlotteorg.wordpress.com/) kann enthüllen, was Sie suchen. Rand und Padding haben keine Wirkung. Ich gehe davon aus, dass sie keine Attribute auf Klassenebene sind, sondern Blockebene? (Entschuldigung, wenn meine CSS-Terminologie falsch ist). – inspirednz

Nun, wie Super offensichtlich, wie das ist, die Lösung die !important Eigenschaft, verwenden, um an anderer Stelle definiert war jener Vorrang zu geben, meine Klassenattribute über (außerhalb meiner Reichweite) im wordpress.com Thema .

Nachfolgend deshalb arbeitet jetzt als ich ursprünglich erwarten war:

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

Quelle

2016-04-03 02:45:05 inspirednz

Hinzufügen von Padding/Leerzeichen nach etwas Text

Antwort

Verwandte Themen