Question

有没有办法让浏览按钮保持在现在的确切位置？例如，如果我调整窗口大小或放大/缩小浏览按钮会离开其位置。

这是css：

 <style>
  ul.Nav2 {
  list-style-type:none;
  margin:0 auto;
  padding:0;
  overflow:hidden;
  width:auto;
}

ul.Nav2>li {
   position:fixed;
   top:0;
   right: 25%;
   padding:0px;
   width:100px;
   height:20px;
   margin:10px;
   z-index: 9999;
   float: right;


}

ul.Nav2 li a {
  font-family:"Arial";
  font-size:15px;
  color:#FFF;
  display:block;
  width:auto;
  height:35px;
  line-height:20px;
/*removed
  text-align:center;
*/
  text-decoration:none;
  opacity:0.6;
  padding:0px 10px;
  ;
  ;
  ;
  -o-transition:all 0.2s ease-in-out;
  transition:all 0.2s ease-in-out;
}

ul.Nav2 li a:hover {
  opacity:1;
}

ul.Nav2 ul {
  list-style:none;
  position:absolute;
  left:-9999px;
  text-align:right;
  float:right
  /*added*/
  display:block;
  padding:0;
  min-width:9.3ex;
}

ul.Nav2 ul li {
  padding-top:1px;
  float:none;
}

ul.Nav2 ul a {
  white-space:nowrap;
}

ul.Nav2 li:hover ul {
  left:inherit;
}

ul.Nav2 li:hover a {
  text-decoration:none;
}

ul.Nav2 li:hover ul a {
  text-decoration:none;
}

ul.Nav2 li:hover ul li a:hover {
}
</style>

Answer 1

问题是ul.Nav2>li已定位到浏览器的右侧。我认为你应该不管它......

像收音机栏一样创建固定容器<div>。（以下示例中的绿框）
在容器中心设置一个不可见的<div>。（红盒子）
将“浏览”菜单置于居中框中。（蓝框）使用margin-left以避免重叠收音机条。

示例：http://jsfiddle.net/Stocki/ZGzb6/

修复了浮动导航栏上导航菜单的CSS定位

1 个答案: