html - 从右边距移动一个最右边的浮动

Question

假设我有一个导航栏，其中有 5 个元素很好地浮动到左侧。然后我添加一个我想在最右边的元素，但我希望在浮动到最右边的元素和实际文档的边缘之间留一点边距。如果我只是这样做float:right;，则元素将被粉碎到文档的末尾。如果我试图弄乱position-rightor margin-right，什么也不会发生。如何让元素远离边缘？

Answer 1

几个选项，首先使用包装器来控制两个 div 分离：

HTML：

<div id="wrapper">
<div id="left">Left Div</div>
<div id="right">Right Div</div>
</div>

CSS：

#left {
    float: left;
}

#right {
    float: right;
}

#wrapper {
    width: 500px;
    margin: auto;
    padding: auto;
    overflow: auto;
}

http://jsfiddle.net/wDjFV/

另一种选择是float: left在 BOTH上做并在<div>那里用边距分开：

HTML：

<div id="left">Left Div</div>
<div id="right">Right Div</div>

CSS：

#left {
    float: left;
}

#right {
    float: left;
    margin-left: 200px;
}

http://jsfiddle.net/wDjFV/3/

更新：

只是对您可能不知道的第二个选项的想法，您需要对任何低于您浮动的 sclear:both的 CSS 规则进行处理，以获得正常的堆叠行为。<div>

Answer 2

padding-right可能是您正在寻找的，而不是position-right. 无论哪种方式，margin-right都应该努力将盒子从页面边缘拉开。padding-right将框保留在页面边缘，但将包含的内容移离边缘更远。