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

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 }

跨度，额外保证金

4 个答案: