css制作横向菜单

使用浮动（Float）实现横向菜单

将菜单项的 display 属性设置为 float: left，使列表项横向排列。清除浮动避免影响后续布局。

.menu {
  list-style: none;
  overflow: hidden; /* 清除浮动 */
}

.menu li {
  float: left;
  margin-right: 15px;
}

使用行内块（Inline-Block）实现横向菜单

将菜单项的 display 设置为 inline-block，并调整间距和垂直对齐方式。

.menu {
  list-style: none;
  padding: 0;
}

.menu li {
  display: inline-block;
  margin-right: 15px;
  vertical-align: top; /* 避免对齐问题 */
}

使用弹性盒子（Flexbox）实现横向菜单

通过 display: flex 创建弹性容器，菜单项自动横向排列，支持灵活的对齐和间距控制。

.menu {
  list-style: none;
  display: flex;
  gap: 20px; /* 设置项间距 */
  padding: 0;
}

使用网格布局（Grid）实现横向菜单

通过 display: grid 和 grid-auto-flow: column 快速实现横向排列，适合复杂布局需求。

.menu {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  gap: 10px;
  padding: 0;
}

横向菜单的样式优化

添加悬停效果、背景色和过渡动画，增强交互体验。

.menu li {
  padding: 8px 12px;
  background: #f0f0f0;
  border-radius: 4px;
  transition: background 0.3s;
}

.menu li:hover {
  background: #ddd;
}

响应式横向菜单

通过媒体查询调整小屏幕下的菜单样式，例如改为垂直排列。

@media (max-width: 600px) {
  .menu {
    flex-direction: column;
  }
}