html - 调整功能区的大小问题

Question

我正在使用我在网上找到的功能区代码，但是在调整浏览器大小/以更小/更大的分辨率查看它时出现问题。

这是我的代码：http ://codepen.io/seraphzz/pen/JhBnG 我曾尝试使用百分比，但没有奏效。

这就是它的样子：http ://cl.ly/image/0E1B2u1I1F1E/content

谢谢。

Answer 1

感谢您的代码笔。

你使用绝对定位，这就是它不动的原因。如果您仍然希望它是绝对的，那么对将接收您的菜单的容器使用绝对定位。
因此，将这个容器设置为从左到右 100% 的宽度。
在该容器内，您可以放置​​一个具有自动边距的较小容器，以便它可以在绝对容器内移动。

对于您的页面，我删除了绝对的相对。从导航并将其设置为边距自动；
开始和结束功能区从导航定位到“相对”参考。
http://codepen.io/gcyrillus/pen/IjDAo
更新：codepen：
有什么新的：

#wrap{
  padding-top:150px;
}

#nav{
  top: 90px;
  margin:auto;
  position:relative;
  width:880px;
}

.ribbon-start {
  left:-85px;
  position:absolute;
  overflow:hidden;
  height:50px;
}
.ribbon-end {
  left:890px;
  position:absolute;
  height:50px;
  overflow:hidden;
}

希望它可以帮助您更多地了解定位。

Answer 2

这是您的功能区的解决方案。我在您的 css 文件中进行了以下更改。您还可以检查jsFiddle。

#nav {
    left: -34px;
    margin: 0 auto;
    position: relative;
    top: 90px;
    width: 960px;
}
.ribbon-end {
    box-shadow: 0 -25px 25px rgba(0, 0, 0, 0.2) inset, 0 0 0 2px rgba(255, 255, 255, 0.25) inset, 0 0 0 1px rgba(0, 0, 0, 0.75) inset, -17px 1px 2px rgba(0, 0, 0, 0.25);
    float: right;
    position: absolute;
    right: -78px;
    top:0px;
}