Question

＆＃13;

div {
    position: relative;
    display: inline-block;
}

div div {
    position: absolute;
    top: 100%;
    background: green;
}

a {
   width: 25px;
   float: left;
}

＆＃13;

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

＆＃13;

我的问题是为什么包含div元素的a在父div宽度上会崩溃？我希望a个元素保留在一行中，但它们会被包裹起来。这是预期的行为吗？我该如何解决它？

Answer 1

我希望元素能够保持在一条线上，但它们会被包裹起来。这是预期的行为吗？

是。它们是向左浮动的，但是父级是绝对定位的，因此文档浮动受到限制。没有设置宽度，因此内部元素与可用空间（0）对齐，甚至是左浮动。

默认情况下，

a元素为inline个元素首先，您必须从float中移除anchors，将其设置为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>

为什么绝对元素宽度受内联块父级限制

1 个答案: