Question

我有一个类似于this的导航栏，我的问题是我希望搜索字段延伸到createCanvas(600, 200, SVG);容器的末尾。我试图在这些元素上使用.PageMenu：

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

我已尝试过其他一些事情，但不确定从何处开始。

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

Answer 1

我建议使用弹性盒。然后将内部元素增加到宽度：100％
代码中的相关变化是：

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

codepen

上的完整版

Answer 2

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

的的index.html

<div id="pageMenuContainer" style="width:100%;min-width:350px;"> <a href="#">Contact us</a> <a href="#">Shipping</a> <a href="#">Potato</a> <div style="float:right;width:calc(100% - 200px)"> <input type="text" placeholder="Search..." style="width:100%;"/> </div> </div>

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

2 个答案:

的的index.html