CSS实现横向导航栏效果

/* 基础样式和Flexbox布局 */
ul.tabbies {
  display: flex;             /* 启用Flexbox布局 */
  flex-wrap: wrap;           /* 允许标签在空间不足时换行 */
  justify-content: flex-start; /* 标签从容器的起始位置开始排列 */
  max-width: 900px;          /* 可选：限制容器最大宽度 */
  margin: 20px auto;         /* 可选：居中容器并提供上下外边距 */
  border-bottom: solid 1px #e1e1e1; /* 为整个标签栏添加底部边框 */
  padding-bottom: 0;         /* 确保底部边框紧贴标签 */
}

通过 border-bottom 为 ul.tabbies 添加一个底部边框，我们创建了标签栏的基线。

3. 样式化单个标签项

现在，我们为每个

/* 样式化单个标签项 */
ul.tabbies li {
  padding: 10px 20px;        /* 标签内部的内边距 */
  text-align: center;        /* 文本居中 */
  cursor: pointer;           /* 鼠标悬停时显示手型光标 */
  margin-bottom: -1px;       /* 向上移动1px，使标签的底部边框覆盖ul的基线 */
  white-space: nowrap;       /* 防止标签文本换行 */
  box-sizing: border-box;    /* 确保padding和border不增加元素总宽度 */
}

margin-bottom: -1px 是一个关键技巧，它使得