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;。在跨度中包装块元素不是一种有效的解决方案，因为它不会改变所包含元素的呈现方式。

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

Answer 3

您应该使用带有<ul>标记的<li>进行导航，float:left;列表元素范围不是很好。如果您不显示列表样式，请设置list-style-type: none;。 <img>也应关闭 - ＆gt; <img .... />

搜索不会坐在导航旁边

3 个答案: