Html 使搜索字段适合其给定空间的宽度

我有一个类似的导航栏，我的问题是我希望搜索字段延伸到

.PageMenu

容器的末尾。我尝试在以下元素上使用

100%

：

• .search\u query

  元素，它将搜索字段放在下一行，同时保持相同的Y位置

• .SearchForm

  元素，它也将搜索字段放在下一行，但它也移动到了行的开头

我试过其他一些方法，但不确定从这里开始该怎么做

---

所有代码和内容都在CodePen链接中：

属性“width”直接从父元素继承，因此，如果您希望DOM层次结构中较低的元素占页面的100%，例如，您必须确保其所有父元素都是，或者使其独立于DOM或其他内容。这里有一个我认为你想要的小样本，一些链接和它们旁边的搜索栏，延伸到屏幕的其余部分。只需将其保存在html文件中并在浏览器中打开即可：

index.html

---

属性“width”直接从父元素继承，因此，例如，如果希望DOM层次结构中较低的元素占页面的100%，则必须确保其所有父元素都是，或者使其独立于DOM或其他内容。这里有一个我认为你想要的小样本，一些链接和它们旁边的搜索栏，延伸到屏幕的其余部分。只需将其保存在html文件中并在浏览器中打开即可：

index.html

---

我建议使用弹性盒。然后将内部元素增加到宽度：100%
守则的有关修订如下：

#SearchForm {
  display: flex;
  flex: 1;
}
#SearchForm form {
  width: 100%;
}
#search_query {
  width: calc(100% - 22px); /* minus the width of the button */
}

---

在

上的完整版本我建议使用flex Box。然后将内部元素增加到宽度：100%
守则的有关修订如下：

#SearchForm {
  display: flex;
  flex: 1;
}
#SearchForm form {
  width: 100%;
}
#search_query {
  width: calc(100% - 22px); /* minus the width of the button */
}

完整版本