【问题标题】：Form Input Alignment Issue (HTML/CSS)表单输入对齐问题 (HTML/CSS)
【发布时间】：2016-02-12 19:30:28
【问题描述】：

上下文：

我对 HTML/CSS 比较陌生，我的任务是为我公司的网站创建一个搜索表单。我的所有实际代码都运行得很漂亮，但让我难过的是一个简单的样式问题。在搜索表单中，文本输入字段和按钮输入字段没有很好地垂直对齐，我无法通过 CSS 让它们配合。我希望它们的高度和水平相同。有什么建议吗？谢谢！

代码：

#srchContainer {
  width: 70%;
  height: 100%;
  border: 0px;
  margin: 0 auto;
  padding: 0;
}
#searchForm {
  text-align: center;
  margin: 20px auto;
  padding: 0;
  width: 100%;
  vertical-align: top;
}
#searchInputBox {
  width: 60%;
  height: 31px;
  border: 1px solid #717171;
  font-size: 1.5em;
  margin: 0;
  padding: 0 0 0 5px;
  display: inline;
}
#srchBtn {
  height: 32px;
  margin-left: 2px;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 0px;
  padding-top: 1px;
  display: inline;
}
.btn {
  color: #717171;
  border-radius: 0px;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 1px;
  padding-top: 1px;
  border: 1px solid #717171;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 0px;
  margin-bottom: 2px;
  height: 20px;
}
.btn:hover,
.btn2:hover {
  background-color: #717171;
  color: white;
}

<html>

<body>
  <div id="searchContainer">
    <form id="searchForm">
      <input type="text" id="searchInputBox" />
      <input type="button" id="srchBtn" class="btn" value="Search" />
    </form>
  </div>
</body>

</html>

【问题讨论】：

值得注意的是，您的问题的根本原因是文本输入上设置的字体大小。

标签： html css forms

【解决方案1】：

将vertical-align: middle; 应用于两个输入元素。

【讨论】：

令人惊讶的是，忽略如此简单的事情是多么容易。我曾尝试在父元素上使用它，但不是在输入本身上。非常感谢！

【解决方案2】：

您可以使用 CSS flexbox 轻松进行对齐。

查看以下链接以查看browser support。

这是一个简单的例子：

.navbar {
  display: flex;
}
.navbar input {
  flex: 1;
}
.navbar button {
  border: 1px solid #aaa;
  margin-left: 3px;
}

<div class="navbar">

  <input type="text">

  <button type="button">search</button>

</div>

【讨论】：