多余的填充物-顶部自动添加

Question

我目前正在研究我的站点的响应性，我在侧边栏中搜索+提交输入时遇到了一些问题。在这个边栏中，我有一个主div，显示为一个表，并分成两个单元格。左单元格是文本输入字段，右边单元格是提交按钮(实际上是充当提交按钮的图像)。第一件事是，我无法使它们对齐，文本输入总是在img下的3px。

正如你在这个“小提琴”中看到的：http://jsfiddle.net/5pNF7/

文本输入上方不应该有任何灰色像素。我不明白为什么有一个3px填充-顶部自动添加在这个文本输入。我该怎么摆脱这个？

HTML：

<div id="primary" class="content-area clearfix">
    <div id="content" class="site-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam dui, bibendum nec porta ut, elementum id lacus</p>
    </div>
    <div class="sidebar-area">
        <div id="tertiary" class="sidebar-container">
            <div class="sidebar-inner">
                <div class="widget-area">
                    <aside id="search-2" class="widget widget_search">
                        <form role="search" method="get" class="search-form" action="http://foo.com">
                            <label> <span class="screen-reader-text">Search:</span>

                                <input type="search" class="search-field" value="" name="s">
                            </label>
                            <input type="image" class="search-submit" alt="Search" src="http://localhost/test-elisium/wp-content/themes/twentythirteen-child/resources/search-icon.png">
                        </form>
                    </aside>
                </div>
            </div>
        </div>
    </div>
</div>

和CSS：

.clearfix:after {
    content:".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.site-content {
    float: left;
    max-width: 55%;
    margin-right: 7%;
}
.sidebar-area {
    float: right;
    padding: 30px 3% 0 0;
    width:35%;
}
.widget {
    background-color: #999;
}
.widget input[type="search"] {
    width: 100%;
}
#search-2 form {
    display: table;
}
#search-2 .search-form label, .search-form .search-submit {
    display: table-cell;
}
.search-form .search-submit {
    width: 24px;
}
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}
input[type="search"] {
    -webkit-appearance: textfield;
    border: 2px solid red;
    padding: 5px;
}

Answer 1

加上这个

#search-2 .search-form label, .search-form .search-submit {
    display: table-cell;
    vertical-align: top;
}

http://jsfiddle.net/5pNF7/2/

与垂直对齐顶部，您的两个项目将对齐顶部，而不是一个对齐基线和另一个在顶部。

Answer 2

您可以使用float属性，而不是将form display:table和子元素作为display:table-cell。

#search-2 form {
    width: 100%;
}
#search-2 .search-form label
{
    float:left;
    margin-right:5px;
}
 .search-form .search-submit {
    float:left;
}

还添加clearfix类以获得浮点元素的完整高度。

更新的JSFiddle：http://jsfiddle.net/5pNF7/4/