当前位置：首页 > CSS

css制作横向菜单

2026-01-08 17:41:00CSS

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

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

ul.horizontal-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.horizontal-menu li {
  float: left;
}

ul.horizontal-menu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

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

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

将列表项的 display 属性设置为 inline-block，使其横向排列。注意处理元素间的空白间隙。

ul.horizontal-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  font-size: 0; /* 消除空白间隙 */
}

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

ul.horizontal-menu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

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

使用 Flexbox 实现横向菜单

使用 Flexbox 布局可以更灵活地控制菜单项的排列和对齐方式。

ul.horizontal-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  display: flex;
}

ul.horizontal-menu li {
  flex: 1; /* 等分宽度 */
}

ul.horizontal-menu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

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

使用 CSS Grid 实现横向菜单

CSS Grid 提供了更强大的网格布局能力，适合复杂菜单结构。

ul.horizontal-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

ul.horizontal-menu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

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

响应式横向菜单

添加媒体查询使菜单在不同屏幕尺寸下自适应显示。

ul.horizontal-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  display: flex;
  flex-wrap: wrap;
}

ul.horizontal-menu li {
  flex: 1;
  min-width: 120px;
}

ul.horizontal-menu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

@media screen and (max-width: 600px) {
  ul.horizontal-menu li {
    flex: 100%;
  }
}

每种方法各有优势，浮动方法兼容性最好但较为老旧；Flexbox 和 Grid 是现代布局的首选方案，提供了更强大的控制能力；响应式设计确保菜单在不同设备上都能良好显示。

css制作横向菜单