在调整大小时保持固定 div 对齐

Question

我想在列表的左侧和右侧制作一个菜单。菜单必须固定，我希望它们始终占列表的 10 像素，即使我正在调整大小时也是如此。

我制作了列表 'position: relative'，我希望菜单相对于列表放置。

如您所见，我希望橙色按钮与列表的距离与蓝色按钮的距离相同，即使我调整它的大小时也是如此。

我尝试使用边距、左、右、填充...但似乎没有任何效果。

这是一些css我用过的：

有了这个 css，它看起来像这样：

.navblue {
        float: left;
        position: fixed;
    }

    .navorange {
       float: right;
       position: fixed;
    }


    .navblue ul {
        list-style: none;
        padding-left: 0;
    }

    .navorange ul {
        list-style: none;
        padding-left: 0;
    }

    #biglist {
        background-color: #e3e3e3;
        width: 80%;
        padding: 20px;
        border-radius: 5px;
        color: #000;
        border-color: transparent;
        margin-left: auto;
        margin-right: auto;
    }

如能提供帮助，非常感谢

Answer 1

您必须添加固定位置单位。像下面这样更新你的 CSS。

 .navblue {
    position: fixed;
    left:0;
    top:0;
}

.navorange {
   position: fixed;
   top:0;
   right:0;
}

编辑

根据您在下方的评论，此处已更新 CSS。

#container {
width: 100%;
padding-left:70px;
padding-right:70px;
box-sizing:border-box;
}

.navblue {
position: fixed;
left:0px;
top:0;
}

.navorange {
position: fixed;
top:0;
right:0px;
}

.navblue ul {
list-style: none;
padding-left: 0;
}

.navblue a {
display: block;
font-family: Pictoss;
font-size: 20px;
padding: 2px 20px 38px 20px;
background:#017da1;
width: 20px;
text-decoration: none;
overflow: hidden;
text-shadow: 0 -1px 1px black;
border-radius: 50px;
color: white;
height: 20px;
margin-bottom: 10px;
border: 5px solid #017da1;
-webkit-transition: all ease-in-out .3s;
-webkit-background-clip: padding-box;
}

.navorange a {
display: block;
font-family: Pictoss;
font-size: 20px;
padding: 2px 20px 38px 20px;
background: #e9500c;
width: 20px;
text-decoration: none;
overflow: hidden;
text-shadow: 0 -1px 1px black;
border-radius:50px;
color: white;
height: 20px;
margin-bottom: 10px;
border: 5px solid #e9500c;
}
.navorange ul {
list-style: none;
padding-left: 0;
}

#biglist {    
height: 500px;
background-color: #e3e3e3;
width:100%;
border-radius: 5px;
color: #000;
border-color: transparent;
box-sizing:border-box;
}

DEMO

Answer 2

也许这就是您要找的？ http://jsfiddle.net/myjruLvr/9/

我在图标和主要内容之外添加了一个额外的父级 <div>，然后给它 padding 等于图标的宽度 + 10px margin。而不是 position: fixed;，我使用了 position: absolute;.

或者，您也可以使用 float 属性作为图标。
http://jsfiddle.net/myjruLvr/11/

这是一个粗略的例子。图标浮动在各自的边上，居中的 <div> 两边的 margins 等于图标的宽度 + 10px.

编辑：
看来您要的是粘性菜单之类的东西，但完全由 CSS 制成。可悲的是 position:fixed 相对于浏览器视口定位一个元素，不管它的父元素是如何定位的，我想这就是我们为此设置 several jquery alternatives 的原因。

在调整大小时保持固定 div 对齐

Keeping a fixed div alligned while resizing

html

css

css-position

fixed