html - 为什么div里面有空格？

Question

我有一个包含表单的 div。该表单只是一个文本输入和一个按钮。但是当我将 textinput 的宽度设置为 100% 时，它只填充了 div 的大约三分之一。我无法用表单的两个部分填充 div。 div 的右侧总是有一个很大的空白区域。当文本输入大于任何特殊尺寸时，按钮将被推到下一行。

#searcharea {
  margin-top: 7.5px;
  margin-bottom: 7.5px;
  border: 3px solid black;
  border-radius: 20px;
  display: inline-block;
  height: 40px;
  width:300px;
  background-color: #0000FF;
}

#textinput {
  margin-top: 2.5px;
  margin-bottom: 2.5px;
  display: inline-block;
  height: 35px;
  border: none;
  width: 100%;
  background-color: #00FF00;
  float: left;
  box-sizing: border-box;
}

#button {	
  background-image: url("images/searchtool.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #FF0000;
  border: none;
  width: 20%;
  height: 35px;
  display: inline-block;
  float: right;
  box-sizing: border-box;
}

<div id='searcharea' >
  <form method='GET' style='display:inline-block'>
    <input type='text' name='userinput' id='textinput' placeholder='test'>
    <input type='submit' id='button' value=' '>
  </form>
</div>

我希望文本输入和按钮填满整个 div。但是当我将 textinput 的宽度设置为 80% 时，按钮就放在它旁边，就像 intendet 一样。但它们只填充了 div 的一半。当宽度超过 80% 时，按钮被放到下一行。

下面是两种情况的图片: https://unsee.cc/c3a6cf03/

Answer 1

在表单上使用 Display:flex 并将 flex-basis:100% 赋给“#textinput”。

#searcharea {
  margin-top: 7.5px;
  margin-bottom: 7.5px;
  border: 3px solid black;
  border-radius: 20px;
  display: inline-block;
  height: 40px;
  width:300px;
  background-color: #0000FF;
}

#textinput {
  margin-top: 2.5px;
  margin-bottom: 2.5px;
  display: inline-block;
  height: 35px;
  border: none;
  flex-basis: 100%;
  background-color: #00FF00;
  align-self: center;
 
  box-sizing: border-box;
}

#button {	
  background-image: url("images/searchtool.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #FF0000;
  border: none;
  width:50px;
  height: 35px;
  display: inline-block;
  float: right;
  box-sizing: border-box;
   align-self: center;
}

<div id='searcharea' >
  <form method='GET' style='display:flex'>
    <input type='text' name='userinput' id='textinput' placeholder='test'>
    <input type='submit' id='button' value=' '>
  </form>
</div>