html - 我搜索的图片中的图片没有对齐

Question

这是我的 link如果你看看我在顶部的搜索框，你会发现设计有点不对劲。

这是我的html

<form action="/contacts" class="myform" method="get">
    <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="&#x2713;" /></div>
    <fieldset style="border:none; padding-top:12px;">
    <ul><li>
    <input id="search_area" name="search" type="text" value="matt" />
    <span class="submit_form"></span>
    </li>
    </ul>
    </fieldset>      
</form>

这是我的一些 CSS

#search_bar {
    width: 265px;
}
#search_area {
    background-color:transparent;
    border:medium none;
    color:#000;
    font-size:15px;
    margin-left:10px;
    margin-top:7px;
}
.myform {
    margin: 0px;
    padding: 0px;
}

.submit_form{
    background-image: url(images/search_bar_mag.png);
    height: 35px;
    width: 38px;
    display: inline-block;
    position:relative;
    top:2px;
}
.submit_form:hover{
    background-image: url(images/search_bar_mag.png);
    background-position:bottom center;
}
.myform ul {
    margin: 0px;
    padding: 0px;
    display: block;
}
.myform li {
    background-image: url(images/search_bar_bg.png);
    height: 35px;
    width: 263px;
    display: block;
    font-size: 20px;
}
.myform li:hover {
    background-image: url(images/search_bar_bg.png);
    background-position:center -35px;
}

基本上我需要右边的图像作为表单的提交....关于为什么样式不对的任何想法

Answer 1

发现错误。

您正在与它后面的 共享一条线。 span 的高度是 35px，而 input 的高度只有 18。它们是垂直对齐的，所以 input 比它应该的低。从 css 规则 .submit_form 中删除高度属性，然后查看更改。

要解决此问题，请添加此样式代码:

span.submit_form {
  background-position: 0 -6px;
  height:20px !important;
}