导致提交按钮被某些px向下移动的原因是什么？

Question

我有一个非常简单的表单，包含<input type="text">和<input type="submit">。

这是HTML：

＆＃13;

＆＃13;

body {
  font-family: sans-serif;
}

input {
  border: none;
  outline: none;
}

form {
  background-color: #679;
  height: 3rem;
  padding: 1rem;
}

input[type="text"] {
  height: 100%;
  width: 15rem;
  font-size: 1rem;
  padding: 0 1rem;
  background-color: #eee;
}

input[type="submit"] {
  height: 100%;
  border-radius: 0;
  background-color: #999;
  cursor: pointer;
}

＆＃13;

  <p>The form:</p>
  <form action="index.html">
    <input type="text" placeholder="Search..."><input type="submit">
  </form>

＆＃13;

＆＃13;

＆＃13;

这就是问题所在。在我测试的所有浏览器中看起来都是这样的：

蓝色背景为<form>。

为什么提交按钮向下移动而不与文本输入元素一致？

此外，如果删除<form>元素的填充，则提交按钮甚至会突出<form>元素。

Answer 1

在输入元素中添加vertical-align: top。

body {
  font-family: sans-serif;
}

input {
  border: none;
  outline: none;
}

form {
  background-color: #679;
  height: 3rem;
  padding: 1rem;
}

input[type="text"] {
  height: 100%;
  width: 15rem;
  font-size: 1rem;
  padding: 0 1rem;
  background-color: #eee;
  vertical-align: top;
}

input[type="submit"] {
  height: 100%;
  border-radius: 0;
  background-color: #999;
  cursor: pointer;
  vertical-align: top;
}

<p>The form:</p>
<form action="index.html">
  <input type="text" placeholder="Search..."><input type="submit">
</form>

在你的例子中，flexbox可以更好地工作，为你提供更多的控制和灵活性：

body {
  font-family: sans-serif;
}

input {
  border: none;
  outline: none;
}

form {
  display: flex;
  align-items: center;
  
  background-color: #679;
  height: 3rem;
  padding: 1rem;
}

input[type="text"] {
  height: 100%;
  width: 100%;
  font-size: 1rem;
  padding: 0 1rem;
  background-color: #eee;
}

input[type="submit"] {
  height: 100%;
  border-radius: 0;
  background-color: #999;
  cursor: pointer;
  vertical-align: top;
}

<p>The form:</p>
<form action="index.html">
  <input type="text" placeholder="Search..."><input type="submit">
</form>

Answer 2

这是由于垂直对齐，您需要将其设置为顶部或底部以避免此问题：

body {
  font-family: sans-serif;
}

input {
  border: none;
  outline: none;
  vertical-align:top;
}

form {
  background-color: #679;
  height: 3rem;
  padding: 1rem;
}

input[type="text"] {
  height: 100%;
  width: 15rem;
  font-size: 1rem;
  padding: 0 1rem;
  background-color: #eee;
}

input[type="submit"] {
  height: 100%;
  border-radius: 0;
  background-color: #999;
  cursor: pointer;
}

<p>The form:</p>
  <form action="index.html">
    <input type="text" placeholder="Search..."><input type="submit">
  </form>