如何在主内容左侧创建侧边菜单？现有布局下的实现难题

要让侧边菜单显示在主内容左侧且保持.content容器780px居中的布局，只需对现有CSS做两处关键修改：

1. 给.content添加display: flex，让内部元素横向排列
2. 为侧边栏和主内容分配宽度，确保容器总宽度不超出780px

修改后的CSS代码 #

.content {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 100%;
  min-height: 100vh;
  padding: 0 1rem;
  width: 780px;
  display: flex; /* 启用flex横向布局 */
  gap: 1rem; /* 可选：给侧边栏和主内容之间添加间距 */
}

.sidenav {
  border: 1px solid black;
  width: 200px; /* 固定侧边栏宽度，可根据需求调整 */
  flex-shrink: 0; /* 防止侧边栏被主内容挤压变形 */
}

.main__home {
  flex: 1; /* 让主内容占据容器剩余的所有空间 */
}

对应的HTML结构（无需改动） #

<main class="content">
  <div class="sidenav">
    <!-- 放置姓名、职位等个人信息 -->
  </div>
  <div class="main__home">
    <form action="" method="POST">
      <!-- 表单内容 -->
    </form>
  </div>
</main>

针对你之前尝试的问题说明 #

• flex布局导致全屏：你之前可能误修改了容器的width属性，或是没给子元素分配宽度。现在保留.content的width:780px，同时用flex:1和固定宽度分配内部空间，容器会保持居中且宽度不变。
• float布局的问题：float元素会脱离文档流，不仅容易导致容器高度塌陷，还需要手动计算主内容的margin-left，灵活性和可控性远不如flex布局。
• 把sidenav移到content外：.content是唯一限制宽度的容器，移出后侧边栏自然会拉伸到全屏，不符合你要的布局需求。

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