html - 搜索栏的 CSS 和样式输入标签的问题

Question

这是我正在使用的 CSS 代码:

    #navigation input#search_bar {
        background: url(images/searchbar.png) no-repeat;
        border: none;
        height: 20px;
        width: 156px;
        margin: 0;
        }

    #navigation input#submit {
        background: url(images/submit.png) no-repeat;
        width: 30px;
        height: 20px;
        margin-left: -30px;
        border: none;
        }

HTML:

<div id="navigation">
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">services</a></li>
        <li><a href="#">about us</a></li>
        <li><a href="#">portfolio</a></li>
        <li><a href="#">contact us</a></li>
    </ul>

        <input id="search_bar" type="text" name="search_bar" />
        <input id="submit" type="submit" name="search_submit" value="" />
</div>

提交按钮永远不会与搜索栏内嵌，而是根据浏览器的不同，在搜索栏上方或下方略微移动。

例子:

alt text http://img196.imageshack.us/img196/40/exampleq.png

这是我正在处理的两张图片:

alt text http://img402.imageshack.us/img402/7587/submit.png

alt text http://img138.imageshack.us/img138/6936/searchbarg.png

完整代码:

HTML - http://pastebin.com/m53c47215

CSS - http://pastebin.com/m698b11f8

Answer 1

这看起来像是垂直对齐问题。尝试添加 display:inline-block;到搜索字段和提交按钮。