如何实现可自适应宽度的重叠式HTML双色按钮？

核心优化思路 #

不用两个独立<button>（避免交互冲突、布局冗余），改用单个按钮容器包裹两个文本元素，既能保证整体交互统一，又能轻松实现堆叠效果，还能自适应内容宽度。

完整实现代码 #

<button class="document-btn">
  <span class="doc-name">项目需求分析说明书</span>
  <span class="doc-ext">.docx</span>
</button>

<button class="document-btn">
  <span class="doc-name">LongDocumentNameWithLotsOfCharacters</span>
  <span class="doc-ext">.pdf</span>
</button>

.document-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: 15px;
  padding: 0;
  margin: 8px;
  cursor: pointer;
  /* 可选：限制最大宽度，避免按钮过宽 */
  max-width: 300px;
}

.doc-name {
  position: relative;
  z-index: 1;
  padding: 10px 25px 10px 20px; /* 右侧多留padding，给扩展名留出显示空间 */
  background-color: darkgray;
  border-radius: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 文件名过长时显示省略号 */
  flex: 1;
}

.doc-ext {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-color: gray;
  border-radius: 15px;
  display: flex;
  align-items: center;
  /* 让扩展名固定显示在右侧，左侧padding自动填充剩余宽度 */
  padding: 0 12px 0 calc(100% - 60px);
  white-space: nowrap;
}

关键细节说明 #

1. 自适应宽度：外层按钮用inline-flex，自动根据文件名长度调整宽度，无需手动设置固定值。
2. 扩展名防遮挡：通过calc(100% - 60px)动态设置扩展名元素的左侧padding，确保扩展名始终固定在右侧区域，不会被上层文件名覆盖。
3. 圆角效果保留：容器和两个内层元素都设置border-radius: 15px，避免堆叠后出现直角。
4. 长文件名处理：给doc-name添加text-overflow: ellipsis，文件名过长时自动显示省略号，同时不影响扩展名的可见性。
5. 交互统一：整个结构是单个按钮，点击任意区域都会触发按钮事件，不会出现下层元素无法点击的问题。

扩展调整 #

如果需要更灵活的偏移距离，可以调整doc-name的右侧padding和doc-ext的calc参数，比如把calc(100% - 60px)改成calc(100% - 70px)，就能让扩展名显示的区域更宽。

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