html - CSS对齐搜索框

Question

我已经尝试了一些东西，但无法得到我想要的结果。

这是我的 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 中并浮动它，还是有更好的方法？

Answer 1

添加display:inline-block到表单

#search_form{
    display:inline-block
}

演示

Answer 2

表单的默认display样式是block. 因此，您需要将其更改inline-block为您希望它显示为内联。看到这个 jsFiddle

#search_form {
    display: inline-block;
}

Answer 3

尝试这个：

#header img {vertical-align: middle;}

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

最后一步是float: left从输入中删除。