Question

我想创建一个建议框，但我的“下拉”包中的项目。我希望他们能够根据需要在水平方向上占用尽可能多的空间。

如何告诉菜单占用儿童需要的水平空间？

.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/

Answer 1

绝对定位的元素有一个边界框，由最近的祖先（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>

Answer 2

在min-width: 200px;上，你可以指定.item { white-space: nowrap; overflow: hidden; }而不是绝对宽度，这样就可以让它与孩子一起水平拉伸。

然后，为了防止更大的跨度，你可以强制它永远不会换行：

{{1}}

Answer 3

更新到您的jsfiddle，设置您的输入width:200px

＆＃13;

.container {
  position: relative;
}
.container > input {
  box-sizing: border-box;
  width:200px;
}
.menu {
  position: absolute;
  border: 1px solid blue;
  padding:2px;
}

＆＃13;

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

＆＃13;

防止文本包装在绝对定位的元素中

3 个答案: