跨度,额外保证金

时间:2010-11-19 11:27:24

标签: css

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

但它不起作用。

在右边添加额外空间的好方法是什么?

4 个答案:

答案 0 :(得分:1)

这是什么意思? http://jsfiddle.net/SebastianPataneMasuelli/AMnMv/

(div上有一个红色边框,只需添加类giveMeSpace

答案 1 :(得分:0)

margin-rightpadding-right添加到.top_pane

你没有获得任何额外余量的原因之一是因为它们没有任何高度,所以其他元素只是在它们下面滑动。如果你给跨度一个高度,那么原始方法可能会起作用。但它不是最好的主意,因为它是没有任何实际价值的额外标记。

答案 2 :(得分:0)

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

或者如果无法将填充添加到父容器中:

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

答案 3 :(得分:0)

Spans不会推送元素,你可以做的是在#top_pane

中浮动三个div

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

用css

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