如何根据容器宽度设置元素重叠样式以实现标签页效果？

要让标签页的重叠程度随容器宽度动态变化，核心是根据容器可用宽度计算每个标签的负margin值，确保所有标签总有效宽度刚好填满容器。以下是两种可行方案：

方案1：calc() 动态计算负margin（基于固定宽度标签） #

这个方案保留你原有的inline-block布局，通过calc()自动计算每个标签的重叠量：

/* 定义变量方便维护 */
:root {
  --item-count: 8;      /* 标签总数 */
  --item-width: 100px;  /* 单个标签固定宽度 */
}

li {
  background-color: orange;
  border: 5px dashed red;
  box-sizing: border-box;
  display: inline-block;
  font-size: 20px;
  height: 100%;
  line-height: 30px;
  opacity: 0.75;
  position: relative;
  width: var(--item-width);
  margin: 0;
  /* 关键：计算动态负margin */
  /* 公式推导：总标签宽度 - 容器宽度 = 总重叠量，平均分配到N-1个间隔 */
  margin-right: calc( (100% - var(--item-count)*var(--item-width)) / (var(--item-count) - 1) );
}

/* 最后一个标签不需要右侧margin */
li:last-child {
  margin-right: 0;
}

ul {
  background: brown;
  box-sizing: border-box;
  font-size: 0; /* 消除inline-block的空格间隙 */
  height: 40px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: 100%;
}

原理说明： #

• 当容器宽度 ≥ 所有标签总宽度（8×100px=800px）时，100% - 800px 为正或0，margin-right 为正或0，标签无重叠（或刚好贴合）。
• 当容器宽度 < 800px时，100% - 800px 为负数，margin-right 变为负数值，容器越窄，负值越大，标签重叠程度越高。

方案2：Flex布局实现自适应宽度+动态重叠 #

如果允许标签宽度自适应，用Flex布局可以更简洁，同时实现重叠效果：

:root {
  --item-count: 8;
  --min-item-width: 80px; /* 标签最小宽度 */
}

ul {
  background: brown;
  box-sizing: border-box;
  height: 40px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  display: flex;
  justify-content: center;
}

li {
  background-color: orange;
  border: 5px dashed red;
  box-sizing: border-box;
  font-size: 20px;
  line-height: 30px;
  opacity: 0.75;
  position: relative;
  /* 基础宽度+自适应 */
  flex: 0 1 var(--min-item-width);
  /* 动态重叠：利用负margin挤压 */
  margin-right: calc( (var(--min-item-width) - 100%/var(--item-count)) * -1 );
}

li:last-child {
  margin-right: 0;
}

原理说明： #

• Flex布局自动分配空间，当容器足够宽时，标签保持最小宽度，重叠量极小；
• 容器变窄时，100%/var(--item-count) 小于最小宽度，计算出的负margin值增大，标签重叠程度提升。

注意事项 #

• 两种方案都不需要JavaScript，纯CSS实现响应式变化；
• 使用CSS变量（:root 定义）可以快速修改标签数量、宽度等参数，便于维护；
• 若需要限制最大重叠量，可以结合媒体查询，给margin-right设置一个最小负值（比如margin-right: min(calc(...), -30px)）。

内容的提问来源于stack exchange，提问作者5260452