Question

我需要让我的搜索栏保持静态，但是一边调整到浏览器宽度。就像https://www.youtube.com上的那个一样。他们以任何方式轻松实现这一目标吗？如果不是，我怎么能让我的搜索栏保持在我的屏幕中心？

（我在我的网站上使用bootstrap 3）

`http://jsfiddle.net/lasquish/e0b66vy8/`

Answer 1

在你的div中使用style =＆＃34;显示：table＆＃34;使搜索按钮直接显示在搜索栏旁边。设置保证金为0px;在酒吧和按钮本身。然后使用最小宽度和％宽度调整条形尺寸。并在div上使用white-space:nowrap;以防止当宽度变得太小时按钮和输入栏与换行符分离。

这样的事情： http://jsfiddle.net/e0b66vy8/2/

     <form class="navbar-form navbar-left" role="search">
    <div class="form-group" style="display:table; white-space:nowrap;">

      <input type="text" class="form-control" placeholder="Search" size=60px style="margin:0px; min-width:160px; width:65%;"></input>

    <button type="submit" class="btn btn-default" style="margin:0px;">Submit</button>

        </div>
  </form>

如果您希望搜索栏不在屏幕的最左侧...
您可以使用margin-left:100px;（或任何值）将其从左侧推过。（在margin:0px;

之后插入CSS

Answer 2

是的，相对和绝对假位可以轻松实现。工作示例是[这里] [1] https://codepen.io/jamesbarnett/pen/aBnbL

[1]: https://codepen.io/jamesbarnett/pen/aBnbL

使搜索栏与youtube.com类似

2 个答案: