跨度，額外的利潤

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