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

将<{1}}添加到表单

display:inline-block

<强> DEMO

Answer 2

表单的默认display样式为block。因此，您需要将其更改为inline-block，因为您希望它显示为内联。见this jsFiddle

#search_form {
    display: inline-block;
}

Answer 3

试试这个：

#header img {vertical-align: middle;}

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

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

CSS对齐搜索框

3 个答案: