Question

虽然在一堆文本中创建了一个非正式的下拉菜单（类似，但带有图像），但是根据下拉菜单的宽度未正确设置父级宽度（通常可见的文本）。我希望下拉列表是可点击项的宽度的定义。

绿色（#st）的宽度完美显示，而没有'display：block;'在#nd上，但随后#nd不会溢出周围的文本。

过去2天，我一直在使用Firefox开发人员工具（以前称为FireBug）调试它的行为，但是没有找到任何可用的解决方案。大约5年前，我最后一次接触CSS。曾经能够做到这一点而没有任何头痛。 ;-）

#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>

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

1 个答案: