宽度撑开容器

这个问题很常见，原因在于 <div> 默认是块级元素 (block) ，它的宽度会自动占满父元素的整行，而不是根据内容收缩；而内部的 <span> 默认是行内元素 (inline)。

要让父容器的宽度"刚好"包裹住内部两个水平排列的 <span>，有几种最简单有效的方法：

---

方法一：使用 Flexbox（推荐）

这是最现代且最灵活的方法。将父元素设置为 inline-flex，它既能让子元素水平排列，又能让父容器宽度根据内容自适应。

.in {
  display: inline-flex; /* 关键点：行内弹性盒子 */
  border: 1px solid red; /* 方便你观察边框收缩 */
}

• 优点： 自动处理子元素对齐，代码简洁。

---

方法二：使用 inline-block

将父容器改为行内块级元素，它就不会再霸占整行，而是根据内容宽度收缩。

.in {
  display: inline-block; /* 关键点 */
  border: 1px solid red;
}

.in span {
  /* 如果你的 span 换行了，确保它们是水平的 */
  display: inline-block; 
}

• 注意： 使用 inline-block 时，HTML 代码中两个 <span> 之间的换行符会被解析为一个空格。如果需要缝隙消失，可以将父级的 font-size 设为 0。

---

方法三：使用 fit-content

如果你希望 <div> 依然保持块级元素的某些特性（比如独占一行，但宽度收缩），可以使用 width 属性的新值。

.in {
  display: block; 
  width: fit-content; /* 关键点：宽度匹配内容 */
  border: 1px solid red;
}

• 优点： 非常语义化，明确告诉浏览器"宽度等于内容宽度"。

---

总结与建议

方案	CSS 核心属性	表现结果
Flex 方案	display: inline-flex;	首选。 宽度自适应，且内部子元素排列最容易控制。
Inline 方案	display: inline-block;	兼容性好，但要注意 HTML 换行带来的多余空格。
Fit-content	width: fit-content;	简单直接，适合不想改变 display 属性的场景。

您可以尝试将 .in 的样式改为 display: inline-flex; 看看效果。如果您希望这两个 span 之间有间距，还可以给父级加上 gap: 10px;。