css 菜单栏 自适应

对于自适应的 CSS 菜单栏，你可以使用媒体查询和弹性布局来实现。下面是一个简单的示例：

HTML 结构：

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

CSS 样式：

.menu {
  display: flex;
  justify-content: center; /* 居中对齐菜单项 */
}

.menu ul {
  display: flex;
  list-style-type: none;
}

.menu li {
  margin: 0 10px;
}

.menu a {
  text-decoration: none;
  color: #000;
}

/* 媒体查询 */
@media screen and (max-width: 600px) {
  .menu {
    flex-wrap: wrap; /* 菜单项换行显示 */
  }
  
  .menu li {
    margin-bottom: 10px; /* 调整菜单项间距 */
  }
}

这个示例中，`.menu` 使用了弹性布局，`.menu ul` 设置了无序列表样式，`.menu li` 设置了菜单项间距。通过媒体查询，在屏幕宽度小于等于 600px 时，菜单项会自动换行，并调整间距。

你可以根据实际需求修改样式和媒体查询的条件来适应不同的设备和屏幕尺寸。希望对你有帮助！如果有任何问题，请随时提问。