Html 如何使元素留在容器中？_Html_Css

Html 如何使元素留在容器中？

html css

Html 如何使元素留在容器中？,html,css,Html,Css,示例代码在这里。如果水平缩短页面，搜索框将移动到页面顶部标题的外部。如何使所有元素都保留在标题中基本上，我试图制作一个行为类似stackoverflow的标题。对于stackoverflow，如果将页面缩小，页眉元素将保留在页眉中，并且不会向上或向下移动下面是JSFIDLE不工作时的代码 <body> <div id="header"> <div id="page-nav" > <a id="login

示例代码在这里。如果水平缩短页面，搜索框将移动到页面顶部标题的外部。如何使所有元素都保留在标题中

基本上，我试图制作一个行为类似stackoverflow的标题。对于stackoverflow，如果将页面缩小，页眉元素将保留在页眉中，并且不会向上或向下移动

下面是JSFIDLE不工作时的代码

<body>
    <div id="header">
        <div id="page-nav" >
            <a id="login" href="/login">login</a>
            <form id="search-form" action="search.py" method="get">
                <input id="searchbox" type="text" name="q" placeholder="search"/>
            </form>
        </div>
    </div>
</body>

只需指定最小宽度：

#header{
  min-width: 720px;  /* or whatever the size of the content is */
}

（并删除溢出属性，不需要它）

#header{
  min-width: 720px;  /* or whatever the size of the content is */
}