Question

示例代码在这里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;*/
}

Answer 1

只需指定最小宽度：

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

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

如何使元素保持在容器内？

1 个答案: