html - 防止文字环绕在绝对定位的元素中

我想创建一个意见箱，但“下拉列表”中的项目会自动换行。我希望他们在水平方向上占据所需的空间。

我如何告诉菜单在水平方向上占用其子菜单所需的空间？

.container {
  position: relative;
  width: 200px;
}

.container > input {
  box-sizing: border-box;
  width: 100%;
}

.menu {
  position: absolute;
  border: 1px solid blue;
  padding: 2px;
}

<div class="container">
  <input type="text">
  <div class="menu">
    <span class="item">a very very very very long item</span>
  </div>
</div>

和一个jsfiddle：https://jsfiddle.net/89d2z95t/6/

最佳答案

绝对定位的元素具有一个边界框，该边界框由最近定位的祖先（MDN）设置。流出要素受这些边界的限制。

在您的代码中，由于最接近的祖先（.container）具有200px的固定宽度，因此绝对定位的后代（.menu）不能超过该限制。因此，文本换行。

您可以使用white-space: nowrap强制元素使边界框溢出。

.container {
  position: relative;
  width: 200px;
}

.container>input {
  box-sizing: border-box;
  width: 100%;
}

.menu {
  position: absolute;
  border: 1px solid blue;
  padding: 2px;
  white-space: nowrap; /* NEW */
}

<div class="container">
  <input type="text">
  <div class="menu">
    <span class="item">a very very very very long item</span>
  </div>
</div>

关于html - 防止文字环绕在绝对定位的元素中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49395296/