为什么嵌套在浮点或内联块元素内的绝对元素内的所有内容都会自动换行

Question

我有这部分样式，一个相对的 inline-block 元素，里面有一个绝对元素：

<div style="display:inline-block;position: relative">
  <div style="position:absolute">
    <input type="text" />
    <input type="button" value="submit" />
  </div>
</div>

这种情况也不是很不寻常，可以在 CSS 下拉菜单中看到，但您使用 display:inline-block 而不是使用 float:left 到 li 元素。

为什么在这种特定情况下，绝对块内的输入被包装？如果您尝试删除，分配的属性之一（从位置到显示）不会突然换行？又如何在不改变样式结构的情况下解决？

<div style="display:inline-block;position: relative">
  <div style="position:absolute">
    <input type="text" />
    <input type="button" value="submit" />
  </div>
</div>

Answer 1

带有position:absolute 的元素具有收缩以适应 行为。如果你写一个长句子，你会注意到同样的想法，它会在每个单词上中断：

<div style="display:inline-block;position: relative">
  <div style="position:absolute">
    aaaa bbb ccc ddd  eee fff
  </div>
</div>

来自the specification：

缩小以适应宽度的计算类似于使用自动表格布局算法计算表格单元格的宽度。粗略地：通过格式化内容而不换行来计算首选宽度，除了显式换行符之外，还计算首选最小宽度，例如，通过尝试所有可能的换行符。 CSS 2.1 没有定义确切的算法。第三，计算可用宽度：这是通过将'left'（情况1）或'right'（情况3）设置为0后求解'width'来找到的。

那么缩容宽度为：min(max(preferred minimum width, available width), preferred width).

在这种情况下，可用宽度将为 0，因为包含块是 inline-block（其宽度为 0，因为它的唯一子元素已从流中移除），所以 max 将是首选最小宽度，首选宽度肯定会更大，因此我们将以首选最小宽度结束。

---

移除inline-block 或position:relative 将改变包含块或包含块的宽度，因此可用宽度 将改变并且将被选择而不是首选最小值宽度 因为在这两种情况下，我们都会以 block 元素作为包含块结束。

使用float:left 而不是inline-block 将创建相同的输出，因为float 的宽度也等于0：

<div style="float:left;position: relative">
  <div style="position:absolute">
    aaaa bbb ccc ddd  eee fff
  </div>
</div>

避免这种情况的一种简单方法是使用white-space:nowrap 来避免所有可能的换行符，并且首选最小宽度将简单地等于首选宽度。

<div style="float:left;position: relative">
  <div style="position:absolute,white-space:nowrap;">
    aaaa bbb ccc ddd  eee fff
  </div>
</div>