Html 将按钮大小与相邻的输入框匹配

我用jQuery创建了一个待办事项列表（请参阅）。我想让“+”按钮与输入框连接起来，在输入框中添加一个待办事项列表项，使两者的高度相同

要使按钮匹配，需要对填充进行大量的尝试和错误。将其高度设置为1.5em以匹配输入框不起作用，即使将其设置为“框大小：边框框”

有没有更有效、更准确的方法来实现这一点

以下是相关CSS：

input[type=text] {
  border: 1px solid #ccc;
  height: 1.6em;
  width: 28.23em;
  color: #666;
  height: 1.5em;
}

.button {
  /* Needed to display button next to input box */
  display: inline-block;
  vertical-align: bottom;
  box-shadow: inset 0px 1px 0 0 #fff;
  /* Starts at top, transitions from left to right */
  background: linear-gradient(#f9f9f9 5%, #e9e9e9 100%);
  border: 1px solid #ccc;
  font-size: 0.7em;
  font-weight: bold;
  /* First value sets top and bottom padding; second value sets right and left */
  padding: 0.53em 0.7em;
  text-shadow: 0 1px #fff;
  text-align: center;
  color: grey;
}

和HTML：

<form name="listForm">
  <input type="text" name="listItem"/ placeholder="Add new">
</form><!-- Comment removes gap between inline-block elements
--><button class="button">+</button>

+

将输入的宽度减少1 em。然后将按钮设置为向右浮动，它应该可以工作。

如果您使用引导，您可以使用输入组实现此功能，请参阅：

+

尝试合并类似样式的输入[type=text]，按钮{行高：30px；字体大小：15px；}