固定导航列表上的负边距答案

【问题标题】：Negative Margins on a fixed navlist固定导航列表上的负边距
【发布时间】：2012-10-09 23:49:00
【问题描述】：

所以基本上我拥有的是一个包含所有内容的主容器 div。我想要一个固定的垂直导航列表出现在容器的一侧。

当我调整窗口大小以查看不同的分辨率时，会出现问题。我现在在我的容器中使用大约 1024 像素的固定宽度，最小宽度为 1200 像素，但它仍然切断了固定导航列表的一部分，因为我在导航容器上使用了 -125 像素的边距以使其超出内容容器。

这就是正常的样子

然后当缩小尺寸并且我设置的最小宽度开始时

这是导航的代码 .nava { 向左飘浮; 位置：固定；左边距：-125px；文本对齐：右； }

【问题讨论】：

你能添加你的html代码吗？您可以使用 jsfiddle.net 来放置您的代码示例。
JSfiddle 现在 jsfiddle.net/FjgCh
嗯，有很多方法可以解决这个定位问题。我不确定我是否正确解释了您的问题。这是更新的fiddle。请注意，这是一个非常脆弱的修复，如果您的 .nava 栏的宽度发生变化，它将运行到容器中。另一种将菜单固定在容器旁边的方法，需要手动将left css 属性设置为偏移，fiddle here。两者都使用absolute 定位，后者将position:relative; 应用于.container。
@VKen 不幸的是，这个问题如此困难的原因是我希望它保持 position:fixed ... 所以使其绝对或相对只能解决通过浏览器切割边距的问题。有没有办法将另一个容器贴在居中的一侧，然后固定导航？我仍然不确定可以做什么。
position:fixed 将设置.nava 容器固定到屏幕的视口。这意味着即使您在较小的屏幕上同时滚动 x 轴和 y 轴，它也会严格固定在那里，并且会挡住下面的内容。那是你要的吗？也有解决方案。

标签： html css css-float margins

【解决方案1】：

.nava
{
    float:left; 
    position: fixed;
    min-width: ??px         //Set your minimum needs here.
    max-width: ???%;        //preferably % because you don't know the maximum
    padding-left: -125px;   //!!!
    text-align:right; 
}

当你的意图是填充时，永远不要使用边距，永远不要！

【讨论】：

^ ?这不是问题，我很感激你的尝试