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

Question

我有一个类似于 this 的导航栏，我的问题是我希望搜索字段延伸到 .PageMenu 容器的末尾。我尝试在这些元素上使用 100%:

• .search_query 元素，它将搜索字段放在下一行，同时保持相同的 Y 位置。
• .SearchForm 元素，它也将搜索字段放在下一行，但它也移到了行的开头。

我已经尝试了一些其他的东西，但不确定从这里到哪里去。

所有代码和内容都在 CodePen 链接中:http://codepen.io/DrOverbuild/pen/PGyLpW/

Answer 1

我建议使用 flex-boxes。然后将里面的元素增加到 width: 100%
代码中的相关更改是:

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

完整版 codepen