Question

我遇到display: inline-block li position: absolute|relative个ul { margin: 0; padding: 0; } li { display: inline-block; color: white; } .body { position: absolute; } .one { position: absolute; } .two { position: absolute; display: inline-block; width: 100%; vertical-align: top; } .three { position: relative; display: inline-block; height: 100%; } .four { position: relative; z-index: 5; } .agent-dropdown { position: asbolute; } .box { background: grey; padding: 8px; } .box-container { border: 1px solid red; }元素时，我们很难在<div class="agent-dropdown"> <div class="box-container"> <div class="box"> <ul> <li> <a> <img src="http://i.stack.imgur.com/fhgTc.jpg" /> </a> </li><li> <a> <img src="http://i.stack.imgur.com/fhgTc.jpg" /> </a> </li><li> <a> <img src="http://i.stack.imgur.com/fhgTc.jpg" /> </a> </li> </ul> </div> </div> </div>多个父容器中嵌套，我想知道是否有一套规则可以治理这个？

在沙盒环境中，这可以正常工作：JS Fiddle。

li

position: absolute

但是当嵌套到实时网站上的级别时，ul { margin: 0; padding: 0; } li { display: inline-block; color: white; } .body { position: absolute; } .one { position: absolute; } .two { position: absolute; display: inline-block; width: 100%; vertical-align: top; } .three { position: relative; display: inline-block; height: 100%; } .four { position: relative; z-index: 5; } .agent-dropdown { position: asbolute; } .box { background: grey; padding: 8px; } .box-container { border: 1px solid red; }元素会失去形成，它似乎会在第3 <div class="body"> <div class="one"> <div class="two"> <div class="three"> <div class="four"> <div class="agent-dropdown"> <div class="box-container"> <div class="box"> <ul> <li> <a> <img src="http://i.stack.imgur.com/fhgTc.jpg" /> </a> </li><li> <a> <img src="http://i.stack.imgur.com/fhgTc.jpg" /> </a> </li><li> <a> <img src="http://i.stack.imgur.com/fhgTc.jpg" /> </a> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div>之后中断。 JS Fiddle (Broken)

br

(</?([bB][rR])\s*/?>\n*\s*){3,}

我无法在任何地方使用固定宽度或高度。

Answer 1

在绝对定位的元素中，所有left，margin-left，width，margin-right和right都设置为auto。

因此，根据10.3.7 Absolutely positioned, non-replaced elements，

宽度缩小到适合

计算收缩宽度宽度的算法是

min（最大（首选最小宽度，可用宽度），首选宽度）。

因此，

.body绝对定位，其内容不受欢迎。因此首选宽度为0。因此，缩小到合适的宽度为0。
这同样适用于.one。
.two也绝对定位，但其内容并非不受欢迎。缩小到适合宽度是将图像放在不同行中时所需的最小宽度，因为
- 首选的最小宽度是将图像放在不同的行中时所需的最小宽度。
- 首选宽度是将图像放在同一行时所需的宽度。
- 可用宽度为0.
```
0 = available width < preferred minimum width < preferred width
```

如果您不想要这种行为，可以

增加可用宽度，以便

preferred minimum width < preferred width < available width

例如，

.body, .one {
  left: 0;
  right: 0;
}

＆＃13;

ul {
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  color: white;
}
.body, .one {
  position: absolute;
  left: 0;
  right: 0;
}
.two {
  position: absolute;
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.three {
  position: relative;
  display: inline-block;
  height: 100%;
}
.four {
  position: relative;
  z-index: 5;
}
.agent-dropdown {
  position: asbolute;
}
.box {
  background: grey;
  padding: 8px;
}
.box-container {
  border: 1px solid red;
}

＆＃13;

<div class="body">
  <div class="one">
    <div class="two">
      <div class="three">
        <div class="four">
          <div class="agent-dropdown">
            <div class="box-container">
              <div class="box">
                <ul>
                  <li>
                    <a>
                      <img src="http://i.stack.imgur.com/fhgTc.jpg" />
                    </a>
                  </li><li>
                  <a>
                    <img src="http://i.stack.imgur.com/fhgTc.jpgt" />
                  </a>
                  </li><li>
                  <a>
                    <img src="http://i.stack.imgur.com/fhgTc.jpg" />
                  </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

增加首选的最小宽度，以便

preferred minimum width = preferred width

这可以防止换行：

.two {
  white-space: nowrap;
}

＆＃13;

ul {
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  color: white;
}
.body, .one {
  position: absolute;
}
.two {
  position: absolute;
  display: inline-block;
  width: 100%;
  vertical-align: top;
  white-space: nowrap;
}
.three {
  position: relative;
  display: inline-block;
  height: 100%;
}
.four {
  position: relative;
  z-index: 5;
}
.agent-dropdown {
  position: asbolute;
}
.box {
  background: grey;
  padding: 8px;
}
.box-container {
  border: 1px solid red;
}

＆＃13;

<div class="body">
  <div class="one">
    <div class="two">
      <div class="three">
        <div class="four">
          <div class="agent-dropdown">
            <div class="box-container">
              <div class="box">
                <ul>
                  <li>
                    <a>
                      <img src="http://i.stack.imgur.com/fhgTc.jpg" />
                    </a>
                  </li><li>
                  <a>
                    <img src="http://i.stack.imgur.com/fhgTc.jpgt" />
                  </a>
                  </li><li>
                  <a>
                    <img src="http://i.stack.imgur.com/fhgTc.jpg" />
                  </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

嵌套绝对定位会破坏内联块子元素

1 个答案: