, marge supplémentaire

Question

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

et css:

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

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

J'ai besoin de plus d'espace sur le côté droit de toutes les travées.

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

J'ai essayé de créer une plus étendue:

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

mais il ne fonctionne pas.

Quelle est la bonne façon d'ajouter de l'espace supplémentaire sur la droite?

Answer 1

est ce que vous voulez dire? http://jsfiddle.net/SebastianPataneMasuelli/AMnMv/

(il y a une bordure rouge sur la div qui obtient l'espace, ajoutez simplement la classe giveMeSpace)

Answer 2

Ajouter margin-right ou padding-right-.top_pane

Une raison pour laquelle vous n'obtenez une marge supplémentaire avec les portées vides est parce qu'ils n'ont pas de hauteur, de sorte que les autres éléments sont tout simplement glisser sous eux. Si vous donnez une envergure aux travées, la méthode originale fonctionnera probablement. Mais ce n'est pas la meilleure idée car c'est un balisage supplémentaire sans valeur réelle.

Answer 3

Ajoutez padding-right: 200px au conteneur parent.

Ou si le rembourrage ne peut être ajouté au conteneur parent:

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

Answer 4

Portées ne poussera pas les éléments, ce que vous pouvez faire est de flotter trois divs l'intérieur #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>

avec css

.button { float:left; }