无法将按钮与输入对齐

Question

我已经尝试对齐按钮提交和搜索输入，但我不工作，我不明白为什么。 我有这个样式代码：

input[type=search] 
    border: none
    cursor: text
    padding: 0
    border: 1px solid #cfcfcf
.search-main input, .search-main button
    height: 30px
    display: inline-block

.search-main button 
    background: #55e0a8
    border: none
    width: 18%
    margin-left: -7px
    display:inline-block

.search-main input
    width: 80%

和这个html：

<form method="get" class="search-main">
    <input name="q" type="search">
    <button type="submit"></button>
</form>

这就是我得到的：

Here's the online version

所以，非常愚蠢的问题，但是因为我已经尝试超过40多分钟，我想我会尝试在这里发布。我一直在玩萤火虫，填充物，边距，而且我无法解决问题所在。

Answer 1

你可以尝试 -

.search-main > button {
float: right;
}

Answer 2

将vertical-align: middle添加到您的inline-block元素：

.search-main input, .search-main button {
    height: 29px;
    display: inline-block;
    vertical-align: middle;
}

Answer 3

在内联元素上使用height时会出现问题。

您只需移除height并在两个元素上替换为padding：

.search-main input, .search-main button {
  padding: 10px 0;
  display: inline-block;
}

.search-main button {
  background: #55e0a8
  border: none
  width: 18%
  margin-left: -7px
  display:inline-block
  padding: 11px 0; // +1px for border on the input
}

Answer 4

这很简单，我希望以下代码足以满足您的需求。

.search-main button {
                    background: #55e0a8;
                    border: none;
                    width: 18%;
                    margin-left: -7px;
                    display: inline-block;    //additional code
                    float: left;              //additional code  
                    vertical-align: middle;   //additional code
                    height: 32px;             //additional code 
                    }

这是输入：

<input name="q" type="search" style=" display: inline-block;float: left;">