如何在顶部导航中保持搜索框绝对（并且保持顺畅响应！）？

Question

我是一名新手程序员，我有一些经验丰富的程序员试图解决这个问题，但没有真正的运气。

我需要将搜索框添加到顶部导航，并且搜索框可以响应各种屏幕尺寸 - Link to sample mockups here

搜索栏is currently wrapping/displacing here.

提前感谢任何建议！

Answer 1

这是一个开始：

设置搜索栏本身（div）以显示：inline-block`。这将使其正确定位。

div.header-phoneicon：right：350px

然后，移回电话号码以给它留出空间。更改div.header-phoneinfo css right属性以使其适合。

您需要调整width和right属性以适应所有内容。

Answer 2

这将需要一些媒体查询，以便在屏幕足够宽时浮动 - “先移动”。

.search {
     float: none;
}

@media (min-width: [tablet_width] ) {
  .search, 
  .phone {
     float: left;
  }
}