为什么绝对定位元素的宽度受到 inline-block 父元素的限制

Question

我有以下设定：

div {
    position: relative;
    display: inline-block;
}

div div {
    position: absolute;
    top: 100%;
    background: green;
}

a {
   width: 25px;
   float: left;
}

  <div>
    some
    <div>
      <a href="">1</a>
      <a href="">2</a>
    </div>
  </div>

我的问题是为什么包含 a 元素的 div 会在父级 div 的宽度上崩溃？我期望 a 元素保持在同一行，但它们换行了。这是预期的行为吗？我应该如何解决这个问题？

- courses.indepth.dev

---

折叠是由于父元素为inline-block(而非block)，且未定义top, bottom, left, right位置（如绝对定位）所致。 - Roko C. Buljan

谢谢，我已经解决了。为什么会这样？有什么解决办法吗？我不想将父级 div 更改为块元素。 - Max Koretskyi

Answer 1

我希望a元素在同一行中保持一致，但它们是换行的。这是预期的行为吗？

是的。它们被左浮动，但父元素是绝对定位的，所以受到文档浮动的限制。没有设置宽度，因此内部元素对可用空间（0）进行对齐，即使左浮动也是如此。

默认情况下，a元素是内联元素。 首先，您需要从锚点中删除float，并将它们设置为inline-block。然后它们会垂直定位，要解决这个问题，将 white-space:nowrap;设置到父级元素即可。

div{
    display: inline-block;
    position: relative;
}

div div {
    position: absolute;
    top: 100%;
    background: green;
    white-space: nowrap; /* needed! for inner inline elements */
}

a {
   width: 25px;
   display:inline-block; /* needed just for the 25px width! (otherw. remove) */
}

<div>
    some
    <div>
      <a href="">1</a>
      <a href="">2</a>
    </div>
  </div>

- Roko C. Buljan

---

虽然是真的，但它并没有解释为什么。此外，浮动元素 a 的计算 display 将是 inline-block。 - Hashem Qolami

@HashemQolami 那么如果它被计算为 display:inline-block，你可以使用 float-left ;) http://jsfiddle.net/2x0xd6ej/ - Roko C. Buljan

@HashemQolami - 不，浮动的 a 元素的计算显示（假设没有设置其他显式显示值）是 block，而不是 inline-block。请参见9.7“display”、“position”和“float”之间的关系表。 - Alohci

我不需要使用任何一个 :) 但是，我应该注意 - 分别 - 它仍然没有从技术上解释问题的原因。 [...]父元素是绝对定位的，所以受到文档浮动的限制。 这根本不是关于浮动元素的事情。这是因为在这种情况下，绝对定位非替换元素的宽度 是收缩到合适大小。 - Hashem Qolami

@Alohci 这是真的，我的错。 - Hashem Qolami

@HashemQolami 好的，shrink-to-fit 很好，我使用了elements align to the available space (0)。谢谢。 - Roko C. Buljan