1

これは私のjsfiddleです(結果付き)。http://jsfiddle.net/76kmL/2/

CSS

header {
    background: red;
    color: #FFFFFF;
    padding: 18px;
    height: 110px;
}

#search {
    float: right;
}

HTML

<div id="container">
    <header>
        <a href="#"><h1>Code Name</h1></a>
        <div id="search">
            <form method="post" action="#">
                <input type="text" name="search" value="" placeholder="Search">
                <input type="submit" name="submit" value="Search">
            </form>
        </div>
    </header>

検索バーをヘッダーの見出しに揃えるにはどうすればよいですか? （jsfiddleのように、その下ではありません）

フロートを正しく配置するために本当にフロートを使用する必要がありますか?

4

4 に答える 4

2

フロートを使用する必要はありません。そこには多くのオプションがあります。http://jsfiddle.net/jalbertbowdenii/76kmL/4/display:inline-blockのように、position:(ing) や負のマージンを使用することもできます。

于 2013-01-27T00:04:15.323 に答える
0

float:left;タイトルに a を追加します。<a href="#" style="float:left;"><h1>Code Name</h1></a>

    <div id="container">
        <header>
            <a href="#" style="float:left;"><h1>Code Name</h1></a>
            <div id="search">
                <form method="post" action="#">
                    <input type="text" name="search" value="" placeholder="Search">
                    <input type="submit" name="submit" value="Search">
                </form>
            </div>
        </header>

検索入力を下げたい場合はmargin-top:20px;、検索バーで使用します。

それをチェックしてくださいhttp://jsfiddle.net/CtRBz/

同行 : http://jsfiddle.net/WjSvG/ (マージントップ追加)

于 2013-01-27T00:02:48.267 に答える
-1

cssでz-indexでz位置を定義できます

#search {
    float: right;
    z-index:99;
}

間違って理解しました。

float:left;

タイトルと

margin-top:20px;

あなたが望む解決策なので、他の答えが正しいです。

于 2013-01-27T00:03:06.133 に答える