html - position=fixed div 内 div 的 margin-right

Question

我想要的是:两个小的“返回顶部”按钮，每个按钮都在自己的 div 中。这个 div 对位于外部 div 中。

一个 button-div 应该在那个外部 div 中左对齐，另一个 button-div 应该右对齐。我的想法是让它们“跨越”我的页面容器 div。

一切都很好 - 直到我给外部 div 一个“position:fixed”和“top:70%”，将它们在视口(viewport)中向下移动。

到目前为止，我还没有找到使右按钮-div 右对齐的方法； margin-right 没有效果，即使我删除了左键(以防其对齐影响后面的元素)。

基本方法是:

<div class="tabs1">
<div>
    <a href="#top-of-page">           
        <div class="right1">
            <font color="#FF0000">◄</font> Top
        </div>
    </a>
    <a href="#top-of-page">
        <div class="left1">
            <font color="#FF0000">◄</font> Top
        </div>
    </a>
</div>     

我在 fiddle 中提供了以上内容 here , 有和没有垂直定位。

fiddle 的“结果”窗口显示两对“顶部”按钮。在我尝试将它们从视口(viewport)顶部向下移动之前，顶部的那对行为就像我希望的那样。

第二对显示了我所有尝试的结果:页面主体/容器 div 左侧的两个按钮。在 fiddle 中，我将它们垂直分开，否则它们会相互重叠。

什么是“诀窍”？

Answer 1

可以使用right属性；例如 right: 10px;。如果你想要它对称，你可以使用 left 作为左边的。

编辑:

好吧，我有点误解了这个问题。我会再尝试:如果您希望两个按钮之间的距离不变，您可以添加 left: 50%; 然后通过添加宽度一半的左边距来更正定位。所以这看起来像这样:

.tabs2 {
    width:250px;
    position:fixed;
    top:60%;
    left:50%;
    margin-left: -125px;
}

编辑 2:

如果您只希望此行为从某个屏幕宽度开始，您可以像这样添加一个媒体查询:

.tabs2 {
    width:100%;
    max-width: 250px;
    position:fixed;
    top:60%;
    left: 50%;
    margin-left: -50%;
}
@media (min-width: 250px) {
    .tabs2 {
        margin-left: -125px;
    }
}

虽然我不确定这是最理想或最干净的方式。