css制作横向菜单

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

将菜单项的 float 属性设置为 left 或 right，使它们水平排列。清除浮动避免影响后续布局。

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

.menu li {
  float: left;
}

.menu li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
}

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

将菜单项的 display 属性设为 inline-block，使其水平排列。注意处理元素间的空白间隙。

.menu {
  list-style-type: none;
  font-size: 0; /* 消除空白间隙 */
}

.menu li {
  display: inline-block;
  font-size: 16px; /* 恢复字体大小 */
}

.menu li a {
  padding: 8px 16px;
  text-decoration: none;
}

使用 Flexbox 实现横向菜单

Flexbox 布局是现代CSS中实现横向菜单的推荐方式，代码简洁且控制灵活。

.menu {
  list-style-type: none;
  display: flex;
  gap: 10px; /* 设置项目间距 */
}

.menu li a {
  padding: 8px 16px;
  text-decoration: none;
}

使用 Grid 布局实现横向菜单

CSS Grid 也可以创建横向菜单，适合需要更复杂布局的情况。

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

.menu li a {
  padding: 8px 16px;
  text-decoration: none;
}

响应式横向菜单设计

添加媒体查询使菜单在小屏幕设备上自动调整为垂直布局。

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

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

添加悬停效果增强交互性

为菜单项添加悬停效果，提升用户体验。

.menu li a {
  transition: background-color 0.3s ease;
}

.menu li a:hover {
  background-color: #f0f0f0;
}