不需要的 padding-top 自动添加

Question

我目前正在研究我的网站的响应能力，但在边栏中的搜索 + 提交输入方面遇到了一些问题。在这个侧边栏中，我有一个显示为表格并分为 2 个单元格的主 div。左边的单元格是一个文本输入字段，右边的单元格是一个提交按钮（实际上是一个充当提交按钮的图像）。首先是我无法让它们对齐，文本输入总是在img下3px。

正如你在这个 jsfiddle 中看到的： http://jsfiddle.net/5pNF7/

文本输入上方不应有任何灰色像素。我不明白为什么在这个文本输入上自动添加了一个 3px padding-top。 我该如何摆脱它？

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 属性，而不是将表单 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/