如何使侧边栏菜单与正文的左边距对齐？

Question

我的布局是仅限移动设备的，所以主体最大宽度为 700px，我有一个侧边栏菜单，我想与主体的左边距对齐，目前它与视口对齐，所以如果视口更大超过 700 像素的侧边栏从视口的左边距打开，在其余内容之外。无论屏幕大小如何，如何使其与主体对齐？

.burger-menu {
  width: 0;
  background-color: var(--lightest-grey);
  height: 100%;
  position: absolute;
  display: flex;
  left: 0;
  transition: width 0.7s ease-out;
}

.menu-active {
  width: calc(var(--max-width) * 0.7);
  display: flex;
}

https://codesandbox.io/s/competent-sea-wfnxk?file=/style.css:1949-2021

Answer 1

您的.burger-menu 与left: 0 绝对定位。绝对定位是相对于最近定位的祖先元素，所以将其父元素设置为position: relative。

nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  /* ---------- changes ---------- */
  /* overflow-x: scroll; */
  position: relative;
  /* ---------- changes ---------- */
  -ms-overflow-style: none;
  scrollbar-width: none;
  background-color: var(--medium-grey);
  justify-content: space-between;
  min-height: 2.5em;
}
.burger-menu {
  width: 0;
  background-color: var(--lightest-grey);
  /* ---------- changes ---------- */
  /* height: 100%; */
  height: 100vh;
  /* ---------- changes ---------- */
  position: absolute;
  display: flex;
  left: 0;
  transition: width 0.7s ease-out;
}