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;搜索字段和提交按钮。

Answer 2

position属性可能比margin-left更成功。顾名思义，它是在CSS中定位元素的首选方法。事实上，由于浏览器的不一致，使用其他任何东西通常都不受欢迎。

您需要将两个输入元素包装在另一个元素中，以此方式定位提交按钮。我建议使用form标记，以增加HTML的有效性。

form {
   position: relative;
   }

form input#submit {
   position: absolute;
   right: 0px;
   top: 0px;
   }

毋庸置疑（但无论如何），您可以根据自己的喜好调整像素值。

Answer 3

也许特拉维斯是对的，如果没有，你也可以尝试将你的保证金/填充值设为0。而不是负余量，使用

position: relative;
left:-30px

当然，您可以使用此awesome frameworks that made my life easier and more relax about cross-browser css

Answer 4

将vertical-align:middle;（或任何其他值）添加到两个输入：

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

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

http://jsbin.com/obumo/2/edit

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

4 个答案: