0

私はいくつかのことを試しましたが、私が求めている結果を得ることができませんでした.

これは私の jsfiddle です: http://jsfiddle.net/spadez/2JTfc/4/embedded/result/

これはコードです：

<div id="header">
    <img src="test.jpg" />
    <form id="search_form">
        <input class="kw" id="keyword" placeholder="Keyword" type="text"></input>
        <input id="loc" placeholder="Location" type="text"></input>
        <input type="submit" value="Search" class="button" id="search">
    </form>
    <ul>
        <li><a href="#">Post</a>
        </li>
    </ul>
</div>

同じ行のヘッダーの test.jpg 画像の右側にフォームを移動するにはどうすればよいですか? 私はそれをdivで囲んで浮かせるべきですか、それとももっと良い方法がありますか?

4

3 に答える 3

2

display:inline-blockフォームに追加

#search_form{
    display:inline-block
}

デモ

于 2013-06-05T10:57:46.547 に答える
1

これを試して：

#header img {vertical-align: middle;}

#header form {display: inline-block; vertical-align: middle;}

最後のアクションはfloat: left、入力から削除することです。

于 2013-06-05T11:00:15.507 に答える
1

フォームのデフォルトdisplayのスタイルは ですblock。inline-blockそのため、インラインで表示するように変更する必要があります。このjsFiddleを参照してください

#search_form {
    display: inline-block;
}
于 2013-06-05T10:57:56.550 に答える