如何为日语学习网站测验区添加右侧垂直侧边菜单？

核心思路 #

采用Flexbox布局实现左右分栏，测验内容区自动占据剩余空间，侧边菜单固定宽度并内部垂直排列，这是最直观且易维护的方案。之前未达到预期效果大概率是布局结构层级或属性设置有误，以下是完整实现步骤：

1. 调整HTML结构 #

将测验内容与侧边菜单包裹在统一容器内，明确层级关系：

<div class="quiz-container">
  <!-- 测验主内容区 -->
  <div class="quiz-main">
    <!-- 你的测验题目、选项等原有内容 -->
    <div class="quiz-item" id="q1">
      <h4>问题1</h4>
      <p>この料理は_____美味しいです。</p>
      <label><input type="radio" name="q1"> とても</label>
      <!-- 更多选项 -->
    </div>
    <!-- 更多测验项 -->
  </div>

  <!-- 右侧垂直侧边菜单 -->
  <div class="quiz-sidebar">
    <div class="sidebar-nav">
      <a href="#q1" class="nav-item">问题1</a>
      <a href="#q2" class="nav-item">问题2</a>
      <a href="#q3" class="nav-item">问题3</a>
      <!-- 更多导航项 -->
    </div>
  </div>
</div>

2. CSS布局与样式实现 #

/* 外层容器：控制整体左右布局 */
.quiz-container {
  display: flex;
  max-width: 1200px; /* 适配页面最大宽度，可根据需求调整 */
  margin: 0 auto;
  background: #ffffff;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 测验主内容区：自动填充剩余空间 */
.quiz-main {
  flex: 1;
  padding-right: 30px; /* 与侧边菜单保持间距 */
}

/* 侧边菜单容器：固定宽度 */
.quiz-sidebar {
  width: 190px; /* 菜单宽度，按需调整 */
}

/* 垂直导航菜单：内部垂直排列 */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 菜单项之间的间距 */
}

/* 菜单项样式 */
.nav-item {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
  text-decoration: none;
  color: #333333;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

.nav-item:hover {
  background-color: #e8e8e8;
}

/* 响应式适配：小屏幕下切换为堆叠布局 */
@media (max-width: 768px) {
  .quiz-container {
    flex-direction: column;
  }
  .quiz-sidebar {
    width: 100%;
    margin-top: 20px;
  }
  .sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

替代方案（Grid布局） #

如果偏好Grid，也可以用以下方式实现，效果一致：

.quiz-container {
  display: grid;
  grid-template-columns: 1fr 190px; /* 主内容区占1份，侧边栏固定190px */
  gap: 30px;
  /* 其余容器样式与Flex方案一致 */
}

注意事项 #

• 确保测验内容区没有设置固定宽度，否则会挤压侧边菜单空间
• 侧边菜单的固定宽度需根据页面整体风格调整，避免过宽或过窄
• 响应式规则可根据目标设备尺寸灵活修改

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