css制作横向标签

使用 Flexbox 实现横向标签

通过 display: flex 将容器设置为弹性布局，子元素自动横向排列。设置 flex-wrap: wrap 可让标签在空间不足时自动换行。

.tab-container {
  display: flex;
  gap: 8px; /* 标签间距 */
  flex-wrap: wrap;
}
.tab-item {
  padding: 6px 12px;
  background: #f0f0f0;
  border-radius: 4px;
}

使用 Inline-Block 实现横向标签

通过 display: inline-block 让标签元素横向排列，注意消除 HTML 中的空格间隙。

.tab-container {
  font-size: 0; /* 消除空格间隙 */
}
.tab-item {
  display: inline-block;
  padding: 6px 12px;
  margin-right: 8px;
  font-size: 16px; /* 需重置字体大小 */
}

使用 Grid 布局实现横向标签

CSS Grid 的 grid-auto-flow: column 可强制元素横向排列，适合需要精确控制列宽的场景。

.tab-container {
  display: grid;
  grid-auto-flow: column;
  gap: 10px;
}
.tab-item {
  padding: 8px;
  min-width: 60px;
}

横向滚动标签实现

当标签数量较多时，可通过 white-space: nowrap 和 overflow-x: auto 实现横向滚动效果。

.tab-scroll-container {
  white-space: nowrap;
  overflow-x: auto;
  padding-bottom: 10px; /* 预留滚动条空间 */
}
.tab-scroll-item {
  display: inline-block;
  padding: 8px 16px;
  margin-right: 5px;
}

带激活状态的标签样式

通过 :hover 和 active 类增强交互体验，使用 transition 添加动画效果。

.tab-item {
  transition: background 0.3s;
}
.tab-item:hover {
  background: #e0e0e0;
}
.tab-item.active {
  background: #007bff;
  color: white;
}

响应式标签栏设计

结合媒体查询调整标签布局，小屏幕时改为纵向排列或滚动模式。

@media (max-width: 768px) {
  .tab-container {
    flex-direction: column;
  }
}