html 搜索表单 - 对齐提交按钮

Question

我有 html 搜索表单 - 输入和按钮。

我还有搜索标题 - h2 。但是，如果我删除 h2 标题，我就会遇到按钮垂直对齐的问题。

html:

<h2 class="widget-title">Search</h2>
<form role="search" method="get" id="searchform" action="#">
    <input type="text" placeholder="Search..." value="" >
    <button type="submit" id="searchsubmit" value="">
        <i class="fa fa-search"></i>
    </button>
</form>

CSS:

.widget-title {
    margin-bottom: 40px;
    font-size: 22px;
    line-height: 18px;
}

#searchform input {
    display: block;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid #ccc;
}

#searchsubmit {
  position: absolute;
  top: 59px;
  right: 15px;
  display: inline-block;
  width: 50px !important;
  height: 43px;
  padding: 0;
  border: none;
  margin-bottom: 0;
  vertical-align: middle;
  background-color: transparent;
}

是否可以将带有和不带有搜索标题 (h2) 的按钮对齐？

Answer 1

这里不需要用绝对定位，相对的就可以了。 position: relative和 display: inline将解决问题。这是工作 js fiddle .

<h2 class="widget-title">Search</h2> 的标记是可以的没有。