1

コード例はhttp://jsfiddle.net/BLrKd/です。ページを横方向に短くすると、検索ボックスはページ上部のヘッダーの外側に移動します。すべての要素をヘッダー内にとどめるにはどうすればよいですか?

基本的に、スタックオーバーフローのように動作するヘッダーを作成しようとしています。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 に答える