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

【问题标题】：html search form - align submit buttonhtml 搜索表单 - 对齐提交按钮
【发布时间】：2017-03-20 02:14:10
【问题描述】：

我有 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) 的情况下对齐按钮？

【问题讨论】：

标签： html css

【解决方案1】：

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

无论有没有<h2 class="widget-title">Search</h2>，标记都可以。

【讨论】：

@name name2，这个解决方案适合你吗？