Question

我有这部分样式，一个相对的内联块元素，其中有一个绝对元素：

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

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

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

<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（首选最小宽度，可用宽度），首选宽度）。

在这种情况下，可用宽度将为0，因为包含块为inline-block（由于其唯一的子元素已从流中删除，因此其宽度为0），因此{{ 1}}将是首选最小宽度，而首选宽度肯定会更大，因此我们将以首选最小宽度结尾。 / p>

删除max或inline-block会更改包含块或包含块的宽度，因此可用宽度会发生变化，它将被代替而不是< em>首选最小宽度，因为在两种情况下，我们都以position:relative元素作为包含块结尾。

使用block代替float:left将创建相同的输出，因为float的宽度也等于0：

inline-block

一种避免这种情况的简单方法是使用<div style="float:left;position: relative"> <div style="position:absolute"> aaaa bbb ccc ddd eee fff </div> </div>来避免所有可能的换行，并且首选最小宽度将简单地等于首选宽度。

white-space:nowrap

为什么将绝对元素内的所有内容自动换行嵌套在float或inline-block元素内

1 个答案: