css - 跨度，额外 margin

Question

这是我的 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>

和CSS:

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

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

我需要在所有跨度的右侧增加空间。

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

我尝试再创建一个跨度:

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

但它不起作用。

在右侧添加额外空间的好方法是什么？

Answer 1

你是这个意思吗？ http://jsfiddle.net/SebastianPataneMasuelli/AMnMv/

(获取空间的div上有红色边框，只需添加类giveMeSpace)