Question

假设我有一个导航栏，左边有5个元素很好地浮动。然后我添加了一个我想要在最右边的元素，但是我希望在浮动到最右边的元素和实际文档的边缘之间留一点差距。如果我只做float:right;，则元素会被粉碎到文档的末尾。如果我试图弄乱position-right或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两个<div>进行<div id="left">Left Div</div> <div id="right">Right Div</div>并在那里分开边距：

HTML：

#left {
    float: left;
}

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

CSS：

clear:both

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

更新

只考虑一下你可能不知道的第二个选项，你会想要对任何<div>的CSS规则做{{1}}正常的堆叠行为。

Answer 2

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

从右边缘移动一个最右边的浮子

2 个答案: