Question

我制作了一个典型的菜单按钮。但出于某种原因，当我缩小浏览器时，它开始略微上升？它可能很简单，但我不知道为什么？它也非常恼人！

<div id="lines" onClick="return showMenu()" class="btn"></div>


#lines:hover {
  background-color:#a2a2a2;
}

.btn { 
  position: relative;         
  margin-top:2%; 
  border: 2px solid #a5aaaa;
  border-radius: 2px; 
  height: 36px; 
  width:36px;  
  float:right;
  right:20px;
  position:relative;
}

#lines:before { 
  border-bottom: 17px double #a5aaaa;
  border-top: 6px solid #a5aaaa;    
  content:"";
  height: 5px; 
  position: absolute; 
  right:3px;  
  top: 4px; 
  width:30px;   
}

Answer 1

margin-top：0表示.btn

http://jsfiddle.net/g36Va/

#lines:hover {
  background-color:#a2a2a2;
}

.btn { 
  position: relative;         
  margin-top:0; 
  border: 2px solid #a5aaaa;
  border-radius: 2px; 
  height: 36px; 
  width:36px;  
  float:right;
  right:20px;
  position:relative;
}

#lines:before { 
  border-bottom: 17px double #a5aaaa;
  border-top: 6px solid #a5aaaa;    
  content:"";
  height: 5px; 
  position: absolute; 
  right:3px;  
  top: 4px; 
  width:30px;   
}

Answer 2

您只是将保证金顶部设置为2％，这是页面高度的百分比。

尝试将其设置如下：

margin-top:2px;

或者你喜欢的任何价值。

您只需要一个静态值而不是动态值，每次窗口重新调整大小时都会继续计算值。

当我收缩浏览器时，我的菜单按钮垂直向上移动

2 个答案: