如何删除此搜索框中的额外空格（在输入字段和按钮之间）

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>

Answer 2

我只需将display: flex添加到form元素：

＆＃13;

＆＃13;

form {
  display: flex;
}

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用float布局属性的另一种方法是给按钮一个负左边距：

.search {
    margin-left: -4px;
}

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;
margin-left: -4px;
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 4

可能有两种解决方案。

当您的输入和按钮排成一行时，您可以使用margin-left: -5px按钮

或者您可以使用浮动输入。

float: left;