这是我的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>
但它不起作用。
在右边添加额外空间的好方法是什么?
答案 0 :(得分:1)
(div上有一个红色边框,只需添加类giveMeSpace
)
答案 1 :(得分:0)
将margin-right
或padding-right
添加到.top_pane
你没有获得任何额外余量的原因之一是因为它们没有任何高度,所以其他元素只是在它们下面滑动。如果你给跨度一个高度,那么原始方法可能会起作用。但它不是最好的主意,因为它是没有任何实际价值的额外标记。
答案 2 :(得分:0)
将padding-right: 200px
添加到父容器。
或者如果无法将填充添加到父容器中:
.top_pane:last-child {
padding-right: 200px
}
答案 3 :(得分:0)
Spans不会推送元素,你可以做的是在#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>
用css
.button { float:left; }
div.button { margin-right:10px }