如何让元素留在容器内？

示例代码在这里http://jsfiddle.net/BLrKd/。如果水平缩短页面，搜索框将移动到页面顶部的标题之外。我怎样才能使所有元素保持在标题中？如何让元素留在容器内？

基本上我试图使一个头像行为像stackoverflow。对于stackoverflow，如果您使页面变小，标题元素将保留在标题中，并且不会向上或向下移动。

这里是在壳体的jsfiddle代码不工作

<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>

这里是CSS

body { 
    margin: 0; 
    padding: 0; 
} 
#header { 
    background-color: #015367; 
    overflow:hidden; 
    height: 50px; 
    /*border-style:solid;*/ 
} 

#login { 
    color: #b92c2c; 
    font-size: 1.25em; 
    float: left; 
    margin-left: 10em; 
    margin-top: 16px; 
    text-decoration: none; 
    /*border-style:solid;*/ 
} 
#page-nav 
{ 
    float: right; 
    margin-right: 13em; 
    /*border-style:solid;*/ 
    /*border-color:white;*/ 
} 

#search-form { 
    float: right; 
    margin-left: 0.5em; 
    margin-right: 1em; 
    margin-top: 16px; 
    /*border-style:solid;*/ 
    /*border-color:yellow;*/ 
}

来源

2013-02-09 bab

只要指定的最小宽度：

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

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

来源

2013-02-09 02:56:22

如何让元素留在容器内？

回答

相关问题