时间戳

首页 > 解决方案 > 如何删除此搜索框中的多余空格（输入字段和按钮之间）

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

问题描述

表格截图

在此图像中，您可以在输入字段和搜索按钮之间看到一个可见的额外空间。我想删除这个空间并使它们关闭。如果我在编码中的某个地方出错，请告诉我解决方案。我该如何克服这个问题？

而且，这是我的代码：

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>

标签： htmlcss

解决方案

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

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;
}
<form action="search.php" method="GET">
  <input class="search_input" id="search" type="text" name="q">
  <button class="search" type="submit">SEARCH</button>
</form>

推荐阅读