Html 为什么div中有一个空格？

我有一张表格在里面。表单只是一个文本输入和一个按钮。但是当我将textinput的宽度设置为100%时，它只填充了div的三分之一。我无法用表单的两个部分填充div。在div的右边总是有一个很大的空白。 当文本输入大于任何特殊大小时，按钮被按下到下一行

#搜索区域{
利润上限：7.5px；
保证金底部：7.5px；
边框：3倍纯黑；
边界半径：20px；
显示：内联块；
高度：40px；
宽度：300px；
背景色：#0000FF；
}
#文本输入{
利润上限：2.5px；
保证金底部：2.5px；
显示：内联块；
高度：35px；
边界：无；
宽度：100%；
背景色：#00FF00；
浮动：左；
框大小：边框框；
}
#按钮{
背景图片：url（“images/searchtool.png”）；
背景尺寸：包含；
背景重复：无重复；
背景色：#FF0000；
边界：无；
宽度：20%；
高度：35px；
显示：内联块；
浮动：对；
框大小：边框框；
}

---

从html中的

表单

元素中删除

style='display:inline块'

#搜索区域{
利润上限：7.5px；
保证金底部：7.5px；
边框：3倍纯黑；
边界半径：20px；
显示：内联块；
高度：40px；
宽度：300px；
背景色：#0000FF；
}
#文本输入{
利润上限：2.5px；
保证金底部：2.5px；
显示：内联块；
高度：35px；
边界：无；
宽度：100%；
背景色：#00FF00；
浮动：左；
框大小：边框框；
}
#按钮{
背景图片：url（“images/searchtool.png”）；
背景尺寸：包含；
背景重复：无重复；
背景色：#FF0000；
边界：无；
宽度：20%；
高度：35px；
显示：内联块；
浮动：对；
框大小：边框框；
}

---

在表单上使用显示：flex，并将flex-basis:100%赋予“#textinput”

#搜索区域{
利润上限：7.5px；
保证金底部：7.5px；
边框：3倍纯黑；
边界半径：20px；
显示：内联块；
高度：40px；
宽度：300px；
背景色：#0000FF；
}
#文本输入{
利润上限：2.5px；
保证金底部：2.5px；
显示：内联块；
高度：35px；
边界：无；
弹性基准：100%；
背景色：#00FF00；
自对准：居中；
框大小：边框框；
}
#按钮{
背景图片：url（“images/searchtool.png”）；
背景尺寸：包含；
背景重复：无重复；
背景色：#FF0000；
边界：无；
宽度：50px；
高度：35px；
显示：内联块；
浮动：对；
框大小：边框框；
自对准：居中；
}

---

这里是另一个解决方案

在表单上使用flexbox，对于其子项（文本框和搜索按钮），使用flex:0 0自动和flex:1

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

#搜索区域{
边框：3倍纯黑；
边界半径：20px；
显示：内联块；
宽度：300px；
背景色：#0000FF；
}
.searchform{
显示器：flex；
对齐项目：居中；
}
#文本输入{
高度：35px；
显示：内联块；
边界：无；
大纲：无；
填充：0px 8px；
边界半径：20px 0 0px 20px；
弹性：1；
背景色：#00FF00；
框大小：边框框；
}
#钮扣{
flex:0自动；
背景图片：url（“images/searchtool.png”）；
背景尺寸：包含；
背景重复：无重复；
背景色：#FF0000；
边界：无；
宽度：50px；
高度：35px；
框大小：边框框；
}

---

将

更改为

。目前，您的

仅为所需的宽度，因此设置display:block可将其放大到整个宽度。非常感谢！我多次忽略了这个细节。