1

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

1 回答 1

2

只需指定最小宽度：

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

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

于 2013-02-09T02:56:22.190 回答