Question

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

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

这应该是这样的：http://cl.ly/image/0E1B2u1I1F1E/content

感谢。

Answer 1

感谢codepen。

你使用绝对定位，这就是它不移动的原因。如果您仍然想要它绝对，那么请使用绝对定位来接收您的菜单。

对于你的页面，我删除了亲戚的绝对值。从导航并设置在自动边距;
开始和结束功能区从nav定位，是“相对”参考 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;
}

使用功能区调整问题大小

2 个答案: