Spanne, extra-Marge

Question

Hier ist mein html:

<div class="top_pane"> 
    <span class="button"><a href="/settings/">Settings</a></span> 
    <span class="button"><a href="/export_all/">Export</a></span> 
    <span class="button"><a href="/import/">Import</a></span> 
</div> 

und CSS:

span.button { 
    float:right; 
    margin-right: 10px; 
} 

div.top_pane { 
    top:0; 
    width:100%; 
    position:fixed; 
    background-color:#7D9100; 
    height:45px; 
    color:#FFFF9D; 
} 

Ich brauche zusätzlichen Platz auf der rechten Seite aller Spannweiten.

!   Import Export Settings <- i need extra space here -> ! 

Ich habe versucht, eine weitere Spanne zu erstellen:

<div class="top_pane"> 
    <span class="button"></span> 
    <span class="button"><a href="/settings/">Settings</a></span> 
    <span class="button"><a href="/export_all/">Export</a></span> 
    <span class="button"><a href="/import/">Import</a></span> 
    <span class="button"></span> 
</div> 

aber es funktioniert nicht.

Was ist der gute Weg, um zusätzlichen Platz auf der rechten Seite hinzuzufügen?

Answer 1

ist es das, was Sie meinen? http://jsfiddle.net/SebastianPataneMasuelli/AMnMv/

(es gibt einen roten Rahmen auf der div, den Raum bekommt, fügen Sie einfach die Klasse giveMeSpace)

Answer 2

hinzufügen margin-right oder padding-right-.top_pane

Ein Grund Sie keinen zusätzlichen Spielraum mit den leeren Spannweiten bekommen, weil sie keine Höhe haben, so dass die anderen Elemente rutschen gerade unter ihnen. Wenn Sie den Spannweiten eine Höhe geben, würde wahrscheinlich die ursprüngliche Methode funktionieren. Aber es ist nicht die beste Idee, da es extra Markup ohne echten Wert ist.

Answer 3

Fügen Sie padding-right: 200px dem übergeordneten Container hinzu.

Oder wenn padding kann nicht an den übergeordneten Container hinzugefügt werden:

.top_pane:last-child { 
    padding-right: 200px 
} 

Answer 4

Spans nicht Elemente schieben, was Sie tun können, ist schweben drei divs innerhalb #top_pane

<span class="button"><a href="/settings/">Settings</a></span>
<span class="button"><a href="/export_all/">Export</a></span>
<div class="button"><a href="/import/">Import</a></div>

mit css

.button { float:left; }