如何在@media(max-width:900px)下将汉堡菜单定位至最右侧且不破坏边距？

解决方案 #

推荐两种稳定的实现方式，都能保证屏幕缩小时边距不崩：

方法一：Flex布局（优先选择）

利用Flex的justify-content: flex-end让按钮自动靠右，同时继承父容器的padding，无需手动计算偏移量：

@media only screen and (max-width:900px) {
  /* 给汉堡按钮的父容器（比如.header）设置Flex */
  .header {
    display: flex;
    justify-content: flex-end;
    align-items: center; /* 可选：让按钮垂直居中 */
  }
  
  .hamburger-button {
    display: flex;
  }
  
  .hamburger-button .bar {
    background-color: rgb(255, 255, 255);
    width: 5px;
    height: 30px;
    margin: 0px 5px;
  }
  
  nav div.menu {
    display: none;
  }
}

方法二：绝对定位

如果父容器是相对定位，用绝对定位固定按钮在右侧，同时和父容器padding保持一致，避免贴边或溢出：

/* 先给父容器（比如.header）设置相对定位 */
.header {
  position: relative;
}

@media only screen and (max-width:900px) {
  .hamburger-button {
    display: flex;
    position: absolute;
    right: 20px; /* 和父容器在该断点的padding值一致 */
    top: 50%;
    transform: translateY(-50%); /* 垂直居中按钮 */
  }
  
  .hamburger-button .bar {
    background-color: rgb(255, 255, 255);
    width: 5px;
    height: 30px;
    margin: 0px 5px;
  }
  
  nav div.menu {
    display: none;
  }
}

为什么position: relative + left不好用？

relative定位是基于元素自身原位置偏移，容易导致元素超出父容器范围，而且不同屏幕尺寸下需要反复调整left值，灵活性和稳定性都不如上面两种方法。

内容的提问来源于stack exchange，提问作者aminbasiran