html - 使外部块与内部内联块的宽度一样宽

Question

我希望 div 与最长的内联子项一样宽。但我没有存档这个 - 在大多数情况下，div 会在右侧添加一些空间。

如果您尝试以下示例，您将看到“Text 4”右侧的空白红色区域。我希望在“4”的最后一个像素之后看到没有空格和 div.outer 的结尾。

<div style="max-width: 224px;">
  <div class="outer">
    <div>Text 1</div>
    <div>Text 2</div>
    <div>Text 3</div>
    <div>Text 4</div>
    <div>Text 5</div>
  </div>
</div>

.outer {
  display: inline-block;
  background: red;
}

.outer > div {
  display: inline-block;
}

我希望你能帮助我完成这个看似简单的挑战！

标签： htmlcsswidthspacing

Answer 1

您可以使用width: fit-content;而不是使用max-width: 224px;. 我希望这对您的要求有所帮助。

来自：最大宽度：224px

到：宽度：适合内容