html - 搜索不会位于导航旁边

Question

我有一个水平菜单，想在其中放置一个搜索表单，但它似乎在新行上左对齐。我是 html 新手，所以只是学习基础知识（在我的第三个网站上工作真的掌握了 CSS 的窍门）。

<div id="nav">
    <span class="nav">
        <a href="#" alt="$"><span id="jqFade"><img src="images/skydevUpperNav.png"></span></a>
        <a href="#" alt="$"><span id="jqFade"><img src="images/goftbUpperNav.png"></span></a>
        <a href="#" alt="$"><span id="jqFade"><img src="images/genUpperNav.png"></span></a>
        <span id="searchBox">
            <form action="#" method="get">Search
                <input type="text" name="searchGoogle" size="12" maxlength="45" />
            </form>
        </span>
</div>

Answer 1

利用display: inline-block;

工作小提琴：

http://jsfiddle.net/wN6Ae/1/

CSS：

searchBox{
    display: inline-block;
    margin-left: 10px;

}

Answer 2

表单元素block默认呈现，因此您需要将搜索框表单设置为display: inline-block;. 在 span 中包装块元素不是一个有效的解决方案，因为它不会改变所包含元素的呈现方式。

jsFiddle 演示：http: //jsfiddle.net/Bf46a/

Answer 3

您应该使用<ul>标签<li>进行导航，并且float:left;列表元素跨度不好。list-style-type: none;如果您不希望显示列表样式，请设置。<img>也应该关闭-><img .... />