通用的“内容驱动尺寸”的布局梳理

一、先看效果：

 我需要在页面中的相对位置显示两个按钮，这两个按钮放在一个父级div里，内部的按钮按列进行排布。父级div不想事先限定死宽高尺寸，而是根据内部按钮的实际大小动态的撑起来，以便达到在任何显示平台显示都不会出现错位、移位的问题。

实践出的部分代码：
html:

 <!-- 首页园区按钮 -->
            <div class="campus-btn-area">
              <button class="campus-btn selected" onclick="CampusClick('HF_Campus',this)">合肥内场</button>
              <button class="campus-btn" onclick="CampusClick('WH_Campus',this)">芜湖内场</button>
            </div>

css:

.campus-btn-area {
  position: absolute;
  pointer-events: auto;   /* 确保自身可点击 */

  top: 5%;
  left: 22%;
  display: inline-flex;
  /* 改为垂直排列 */
  flex-direction: column;
  /* 关键！让按钮宽度各自适应内容，父容器宽度取最宽者 */
  align-items: flex-start;
  /* 上下按钮间距 */
  gap: 12px;
  /* 内边距（不影响自适应宽高） */
  padding: 14px 22px;
}

/* ---------- 按钮样式 ---------- */
.campus-btn {
  position:relative;
  pointer-events: auto;   /* 确保自身可点击 */
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  /* color: #1a2634; */

  /*默认未被选中状态*/
  background: linear-gradient(180deg, rgba(3, 35, 66, 0.2) 0%, rgba(6, 73, 121, 0.4) 100%);
  border: 1px solid rgba(0, 234, 255, 0.4);
  color: white;
  cursor: pointer;
  white-space: nowrap;
  /* 文字不换行，宽度完全由文字决定 */
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  user-select: none;
  width: auto;
  /* 确保宽度不被拉伸 */
}

.selected {
  background: linear-gradient(to right, #01f4a3, #01e7cc, #00dcea);
  
}

.campus-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.campus-btn:active {
  transform: translateY(0px);
  background: linear-gradient(to right, #01f4a3, #01e7cc, #00dcea);
}

二、总结：实现“子级自由撑开父级”的固定套路

以后遇到类似场景（父容器自适应子内容，不做死宽高），直接套用以下 “反拉伸三要素” 公式即可：

1. 父级容器设置（决定“能被撑开”）

display: inline-flex（对外收缩，对内弹性）。

2. 父级对齐设置（决定“不拉伸子级”，核心关键）

• 必须显式覆盖默认值：align-items: flex-start（或 center / flex-end）。

• 绝对不能省略这一步！如果省略，默认是 stretch，子级会被强行拉宽，父级也就跟着变宽了。

3. 子级宽度设置（决定“自身多宽”）

• 绝对不要写死 width，保持默认 auto（或显式写 width: auto）。

• 配合文本控制：为了让宽度完全由文字决定，加上 white-space: nowrap（防止文字换行导致宽度突变）。

• 尺寸由内容+内边距决定：宽 = 文字宽度 + padding-left + padding-right；高 = 文字高度 + padding-top + padding-bottom。

三、简化版的“万能模板”

/* 父级：自适应包裹子级 */
.parent-wrap {
  position: absolute;      /* 或者 fixed，脱离文档流不占位 */
  display: inline-flex;    /* 1. 开启收缩包裹 */
  flex-direction: column;  /* 横向(row)或纵向(column)按需改 */
  align-items: flex-start; /* 2. 关键！禁止拉伸子级 */
  gap: 12px;              /* 子级间距 */
  padding: 14px 22px;     /* 父级内边距（算入总尺寸） */
  /* 不写 width 和 height */
}

/* 子级：由文字内容撑开 */
.child-item {
  padding: 10px 20px;      /* 尺寸来源1：内边距 */
  font-size: 16px;         /* 尺寸来源2：文字大小 */
  white-space: nowrap;     /* 尺寸来源3：文字长度（不换行） */
  width: auto;             /* 防呆设置，确保不被意外继承拉宽 */
  /* 不写固定的 width 和 height */
}