跨度，额外的利润

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）

Answer 2

添加margin-right或padding-right到.top_pane

一个原因你没有得到与空跨度任何额外的保证金，是因为他们没有任何的高度，因此其他元素下他们只是打滑。如果你给跨度一个高度，那么原来的方法可能会起作用。但它不是最好的想法，因为它是没有任何实际价值的额外标记。

Answer 3

将padding-right: 200px添加到父容器。

或者，如果填充不能被添加到父容器：

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

Answer 4

跨度不会推元素，你可以做的是浮动内#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> 3周的div

with css

.button { float:left; }