html - 绝对立场问题

Question

如何使包装器居中？因为功能区菜单是绝对的，所以我很难让它响应。你知道我需要改变什么来让它响应吗？

这是一个活生生的例子： jsFiddle

body
  -nav
     -div.r1
       div.ribbon(...)
     -div.r2
       div.ribbon(...)
     -div.r3
       div.ribbon(...)
     -div.r4
       div.ribbon(...)
     -div.r5
       div.ribbon(...)
  -div.wrapper(...)

Answer 1

好吧，你在那里有一个非常有趣的设计。你有一堆数字在玩。您在主体上有默认边距，在主体上有 5em 的填充，并且您将金属盒定位到 11.8% 的位置。为了保持导航元素对齐，您需要使用所有这些东西。除非您有支持 calc 的浏览器，否则混合单位会变得非常麻烦。试试这个，或者简化你的布局：

body {
    margin:0;
    padding: 5em;
    background: #333;
}
.nav {
    position: relative;
    right: calc(-11.8% + 5em + 7px);
}

jsfiddle：http: //jsfiddle.net/up7HD/6/

我不确定你从哪里得到 11.8%，或者你为什么使用 5em 进行填充。这两个看起来都很奇怪，因为 em 是相对于字体大小的，这会因浏览器而异，甚至默认字体的浏览器也会改变，11.8% 也不会保持金属框居中，也不会保持足够左侧的空间用于非常小的屏幕上的功能区。