在div內放置一個提交按鈕

Question

嗨，我在提交按鈕的位置上遇到了一些問題。 我已經在下面發布了代碼。

的HTML

<div class="search">
  <form action="post">
    <input type="text" name="fname" placeholder="First name">
    <input type="text" name="lname" placeholder="Last name">
    <input type="submit" name="submit" value="Search">
  </form>
</div>

的CSS

.search {
  position: absolute;
  background-color: red;
  width: 100%;
  height: 30px;
}
input[type="text"] {
  background-color: #f7f7f7;
  height: 30px;
  width: 280px;
  color: #4D4C4C;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  padding: 0px 5px 0px 5px;
  -webkit-box-sizing: border-box;
  moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid rgba(147, 184, 189,0.8);
}
input[type="submit"] {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  height: 30px;
  width: 100px;
}

這是顯示輸出的圖像。 我的問題是，提交按鈕上方有一個很小的空間，我無法找出原因，因為它們兩個的高度都設置為30px。 我希望按鈕具有與.search div相同的高度。 高度：100％似乎無效。

http://i57.tinypic.com/atswm0.png

Answer 1

嘗試添加：

input[type="submit"] {
    position: absolute;
}