html – 如何在div中包含span时调整div的大小？

目前我有一个最大宽度为200px的div,在div中有一些带有属性white-space的跨度：Nowrap和display：inline-block.

.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的宽度不会根据跨度的长度调整大小.它总是具有200px的宽度,这导致跨度后存在空白空间的问题.

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

有人可以帮我这个吗？我不是直接要求答案.一些解释会更好.

解决方法

使用max-width将不允许div宽于给定值(在这种情况下为200px) 使用最小宽度而不是最大宽度可能会帮助你……