CSS父对象与子对象的宽度相同？

Question

在一堆文本中创建非正式下拉列表(类似于 ，但随后带有图像)时，父宽度(通常可见的文本)未根据下拉列表的宽度正确设置。我希望下拉菜单是可点击元素宽度的定义。

绿色的宽度 (#st) 在没有“display: block;”的情况下完美显示在 #nd 上，但是 #nd 并没有溢出它周围的文本。

过去 2 天我一直在使用 Firefox 开发人员工具(以前称为 FireBug)调试它的行为，但没有找到任何可用的解决方案。我最后一次接触 CSS 已经是 5 年前的事了。曾经能够毫 headless 疼地做到这一点。 ;-)

#container {
  position: relative;
  display: inline-block;
}

#st {
  background-color: green;
  display: block;
}

#nd {
  background-color: red;
  position: absolute;
  white-space: nowrap;
}

<ul>
  <li>sadfasdf asdf sadfasdf asdfas dfasdfasd asdaff</li>
  <li>tgestergsgfsdfg
    <div id="container">
      <span id="st">testing</span>
      <ul id="nd">
        <li>sadfasdf asdfsadf</li>
        <li>rwert2345234 345345</li>
      </ul>
    </div>
  </li>
  <li>sadfasdf asdf sadfasdf asdfas dfasdfas dfasdfas</li>
  <li>sadfasdf asdf sadfasdf asdfas dfasdfas dfasdfas</li>
  <li>sadfasdf asdf sadfasdf asdfas dfasdfas dfasdfas</li>
</ul>

Answer 1

将 position:absolute 赋给一个元素会导致它从文档流中移除。这允许它位于其他元素之上(或在某些情况下，之下)的层中，但即使它是直接父元素也无法告知其尺寸或位置。

有时你可以用它来替代给元素 position:absolute

float: left;
margin-bottom: -999em;
position: relative;

#container {
  position: relative;
  display: inline-block;
}

#st {
  background-color: green;
  display: block;
}

#nd {
  background-color: red;
  position: relative;
  float: left;
  margin-bottom: -999em;
  white-space: nowrap;
}

<ul>
  <li>sadfasdf asdf sadfasdf asdfas dfasdfasd asdaff</li>
  <li>tgestergsgfsdfg
    <div id="container">
      <span id="st">testing</span>
      <ul id="nd">
        <li>sadfasdf asdfsadf</li>
        <li>rwert2345234 345345</li>
      </ul>
    </div>
  </li>
  <li>sadfasdf asdf sadfasdf asdfas dfasdfas dfasdfas</li>
  <li>sadfasdf asdf sadfasdf asdfas dfasdfas dfasdfas</li>
  <li>sadfasdf asdf sadfasdf asdfas dfasdfas dfasdfas</li>
</ul>