绝对位置的问题

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填充。这两个看起来都很奇怪，因为它们与字体大小有关，因浏览器而异，甚至浏览器的默认字体也会发生变化，11.8％也不会保持金属盒居中，也不会保持足够的左边的空间用于非常小的屏幕上的色带。