使外部块与内部内联块的宽度一样宽[重复]答案

【问题标题】：Make outer block as wide as the width of the inner inline-blocks [duplicate]使外部块与内部内联块的宽度一样宽[重复]
【发布时间】：2019-08-02 22:45:08
【问题描述】：

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

如果您尝试以下示例，您将看到“文本 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;
}

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

【问题讨论】：

我不清楚到底是什么问题。您是否希望外部 div 与最宽的内部 div 一样宽？此外，这就是您的代码输出的内容-imgur.com/DLTyua2。
我只希望 div.outer 与它的内容一样宽。在我的示例中，当带有文本的 div 被破坏时，右侧会有空白区域。这是我的意思的图形示例：imgur.com/bNkTzR4

标签： html css width spacing

【解决方案1】：

我认为您需要致电 float:left 到 .outer > div 以删除空间。希望对您有所帮助:)

【讨论】：

谢谢，但这并没有帮助 - 休息后仍有空白空间

【解决方案2】：

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

来自：max-width: 224px

收件人：width: fit-content

【讨论】：

谢谢，但这无济于事。我设置 max-width 只是为了模拟浏览器宽度，因此文本必须在某个点中断。如果我按照你说的做并手动调整浏览器大小以使文本中断，那么一旦“文本 5”中断，“文本 4”右侧仍然会有空白区域。