html - 如何删除此搜索框中的多余空间(输入字段和按钮之间)

Question

在此图像中，您可以在输入字段和搜索按钮之间看到可见的额外空间。我想删除这个空间并使它们关闭。如果我的代码某处有误，请告诉我解决方案。我怎样才能克服这个问题？

然后，这是我的代码:

input[type=text].search_input {
    width: 350px;
    height: 40px;
    font-size: 16px;
    background-color: white;
    background-image: url('assets/imgs/asd.png');
    background-position: 7px 4.5px;
    border-top-right-radius:  0px;
    border-bottom-right-radius:  0px;
    border-top-left-radius:  5px;
    border-bottom-left-radius: 5px;
    border-top:2px solid #0073f5;
    border-left:2px solid #0073f5;
    border-bottom: 2px solid #0073f5;
    border-right: 0px solid #0073f5;
    outline: none;
    font-size: 16px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
.search {
    border-top-right-radius:  5px;
    border-bottom-right-radius:  5px;
    border-top-left-radius:  0px;
    border-bottom-left-radius: 0px;
    border-top:2px solid #0073f5;
    border-left:2px solid #0073f5;
    border-bottom: 2px solid #0073f5;
    border-right: 0px solid #0073f5;
    padding: 0px 19px 0px 19px;
    width: 110px;
    height: 40px;
    font-size: 16px;
    background:#0073f5;
    outline: none;
    color : white;
    cursor: pointer;
}

<form action="search.php" method="GET">
  <input class="search_input" id="search" type="text" name="q">
  <button class="search" type="submit">SEARCH</button>
</form>

Answer 1

像这样插入 float:left:

input[type=text].search_input {
    float: left;
    //other codes....
}

input[type=text].search_input {
  width: 350px;
  height: 40px;
  font-size: 16px;
  background-color: white;
  background-image: url('assets/imgs/asd.png');
  background-position: 7px 4.5px;
  border-top-right-radius:  0px;
  border-bottom-right-radius:  0px;
  border-top-left-radius:  5px;
  border-bottom-left-radius: 5px;
  border-top:2px solid #0073f5;
  border-left:2px solid #0073f5;
  border-bottom: 2px solid #0073f5;
  border-right: 0px solid #0073f5;
  outline: none;
  font-size: 16px;
  box-sizing: border-box;
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  float: left;
}
.search {
  border-top-right-radius:  5px;
  border-bottom-right-radius:  5px;
  border-top-left-radius:  0px;
  border-bottom-left-radius: 0px;
  border-top:2px solid #0073f5;
  border-left:2px solid #0073f5;
  border-bottom: 2px solid #0073f5;
  border-right: 0px solid #0073f5;
  padding: 0px 19px 0px 19px;
  width: 110px;
  height: 40px;
  font-size: 16px;
  background:#0073f5;
  outline: none;
  color : white;
  cursor: pointer;
}

<form action="search.php" method="GET">
  <input class="search_input" id="search" type="text" name="q">
  <button class="search" type="submit">SEARCH</button>
</form>