为什么div里面有空格？答案

【问题标题】：Why is there a blank space in the div?为什么div里面有空格？
【发布时间】：2019-10-19 20:39:07
【问题描述】：

我有一个 div，里面有一个表单。该表单只是一个文本输入和一个按钮。但是当我将文本输入的宽度设置为例如 100% 时，它只填充了大约三分之一的 div。我无法用表单的两个部分填充 div。 div 的右侧总是有一个很大的空白区域。当 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;
  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% 时，按钮会放在它旁边，就像意图一样。但它们只填充了大约一半的 div。当宽度超过 80% 时，按钮被放到下一行。

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

【问题讨论】：

将<form style='display:inline-block'> 更改为<form style='display:block'>。目前，您的 <form> 仅与需要一样宽，因此设置 display:block 会将其放大到整个宽度
非常感谢！我忽略了这个细节很多次。

标签： html css

【解决方案1】：

这是另一种解决方案。

您在表单上使用 flexbox，对于它的子项（文本框和搜索按钮），您使用 flex: 0 0 auto 和 flex: 1。

这意味着按钮的宽度将由 css (width: 50px;) 设置，并且在您设置 flex:1 的输入上，这意味着它将占用所有可用空间减去按钮的宽度。因此，即使您增加/减少容器的宽度 (#searcharea)，搜索表单仍会正确显示。

#searcharea {
  
  border: 3px solid black;
  border-radius: 20px;
  display: inline-block;
  
  width:300px;
  background-color: #0000FF;
}
.searchform{
  display:flex;
  align-items:center;
}
#textinput {
  height: 35px;
  display: inline-block;
  border: none;
  outline:none;
  padding:0px 8px;
  border-radius:20px 0 0px 20px;
  flex:1;
  background-color: #00FF00;
  box-sizing: border-box;
}

#button {
flex: 0 0 auto;
  background-image: url("images/searchtool.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #FF0000;
  border: none;
  width:50px;
  height: 35px;
  box-sizing: border-box; 
}

<div id='searcharea' >
  <form method='GET' class="searchform">
    <input type='text' name='userinput' id='textinput' placeholder='test'>
    <input type='submit' id='button' value=' '>
  </form>
</div>

【讨论】：

【解决方案2】：

在表单上使用 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>

【讨论】：

【解决方案3】：

从您的 html 中的 form 元素中删除 style='display:inline-block'

#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'>
    <input type='text' name='userinput' id='textinput' placeholder='test'>
    <input type='submit' id='button' value=' '>
  </form>
</div>

【讨论】：