Question

我目前正在研究我的网站的响应能力，并且我在侧边栏中搜索+提交输入时遇到了一些麻烦。在这个侧边栏中，我有一个主div显示为一个表格，并分为2个单元格。左侧单元格是文本输入字段，右侧单元格是提交按钮（实际上是用作提交按钮的图像）。第一件事是我不能让它们对齐，文本输入总是在img下3px。

正如你在这个jsfiddle中看到的那样： 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

不是将表单显示：table和子元素作为display：table-cell，而是可以使用float属性。

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

还要为表单添加clearfix类以获取float元素的完整高度。

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

不需要的填充顶部自动添加

2 个答案: