如何在HTML/CSS中创建垂直菜单旁边的内容部分

<div class="container">
  <div class="menu">
    <!-- 菜单内容 -->
  </div>
  <div class="content">
    <!-- 内容部分 -->
  </div>
</div>

.container {
  display: flex;
}

.menu {
  width: 200px; /* 菜单宽度 */
  background-color: #f1f1f1; /* 菜单背景颜色 */
}

.content {
  flex: 1; /* 填充剩余空间 */
  padding: 20px; /* 内容部分的内边距 */
}

<div class="menu">
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</div>

.menu ul {
  list-style: none; /* 去除列表项的默认样式 */
  padding: 0; /* 去除列表的内边距 */
}

.menu li {
  margin-bottom: 10px; /* 列表项之间的间距 */
}

.menu a {
  text-decoration: none; /* 去除链接的下划线 */
  color: #333; /* 链接颜色 */
}