css横向菜单制作

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

通过设置 float: left 或 float: right 让菜单项横向排列。需清除浮动避免布局问题。

<ul class="horizontal-menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
</ul>

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

.horizontal-menu li {
  float: left;
}

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

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

通过 display: inline-block 让列表项水平排列，需注意消除默认间距。

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

.horizontal-menu li {
  display: inline-block;
}

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

使用 Flexbox 实现横向菜单

Flexbox 是现代布局方案，通过 display: flex 轻松实现横向排列。

.horizontal-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

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

使用 CSS Grid 实现横向菜单

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

.horizontal-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
}

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

横向菜单的常见样式优化

添加悬停效果和分隔线增强视觉体验。

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

.horizontal-menu li:not(:last-child) {
  border-right: 1px solid #ccc;
}

响应式横向菜单

通过媒体查询调整小屏幕下的菜单布局。

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