html - 当 div 内的 span 被包裹时如何调整 div 的大小？

Question

目前我有一个 max-width:200px 的 div，在 div 内部有一些带有属性 white-space:nowrap 和 display: inline-block 的 span。

.a {
  max-width:200px;
}

.b {
 display: inline-block; 
 white-space:nowrap;
}

<div class="a">
 <span class="b">A</span> <span class="b">B</span>
 <span class="b">C</span>
</div>

当前的行为是，当跨度 A 和跨度 B 的长度超过 div 的最大宽度时，跨度 B 换行到下一行。

<div class="a">
 <span class="b">A</span> Empty space here
 <span class="b">B</span> Empty space here
 <span class="b">C</span> Empty space here
</div>

但是，div 的宽度不会根据 span 的长度进行调整。它的宽度始终为 200px，这会导致跨度后出现空白空间的问题。

我想要的是确保 div 按跨度的长度调整大小，没有任何空白。

谁能帮我解决这个问题？我不是直接要求答案。一些解释会更好。

Answer 1

使用 max-width 将不允许 div 比给定值宽(在本例中为 200px)使用 min-width 而不是 max-width 可能会帮助你......