html - 尝试并排获取两个 HTML 输入

Question

所以我花了一些时间试图解决这个问题，但我最终转向 StackOverflow 寻求帮助。我试图让我的搜索栏和转到按钮显示在一行上，但在执行此操作时遇到了问题。

输入的 html 代码是:

  <nav class="sidebar"> 
  <input type="text"  id="search" placeholder="search">
  <input type="button" name="button" value="Go" class="goButton">
  </nav>

两个输入的CSS如下:

#content .sidebar #search {
    width: calc( 100% - 45px );
    border-radius: 0px;
    height: 42px;
    text-align: center;
    color: #333333;
    font-size: 14px;
    margin-bottom: 21px;
}
/* Go button for search*/
#content .sidebar .goButton {
    position: relative;
    top: -48px;
    width: 45px;
    background-color: #BA2022;
    color: #F3EBDE;
    border-style: none;
    text-transform: uppercase;
    margin-top: 8px;
    border-radius: 0px;
    height: 42px;
    text-align: center;
    font-size: 14px;
    margin-bottom: 21px;
}

有人可以建议解决这个问题吗？目前，输入显示如下:

提前致谢。

Answer 1

当文本框变小一点并且按钮的 margin-top 被移除时，它会对齐:

#content .sidebar #search {
    width: calc( 100% - 60px );
    border-radius: 0px;
    height: 42px;
    text-align: center;
    color: #333333;
    font-size: 14px;
    margin-bottom: 21px;
}
/* Go button for search*/
#content .sidebar .goButton {
    position: relative;
    width: 45px;
    background-color: #BA2022;
    color: #F3EBDE;
    border-style: none;
    text-transform: uppercase;
    margin-top: 8px;
    border-radius: 0px;
    height: 42px;
    text-align: center;
    font-size: 14px;
    margin-bottom: 21px;
}

fiddle :http://jsfiddle.net/s0y93L87/