Css 输入宽度和按钮宽度仅占100%，但不会彼此相邻

我有一个黄色的div，下面是一个红色背景的输入和一个灰色背景的按钮。我希望输入和按钮显示在一起，但它不工作。但这很奇怪，因为我有80%的输入和20%的按钮，两者都没有边距，所以奇怪的是，它不工作。你知道问题在哪里吗

*{
保证金：0；
填充：0；
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
大纲：0；
}
输入
选择
文本区，
钮扣{
填充：15px；
宽度：100%；
}
选择
输入
钮扣{
边界：0；
外观：无；
-moz外观：无；
-webkit外观：无；
光标：指针；
}
img{
宽度：100%；
最大宽度：100%；
垂直对齐：中间对齐；
保证金：0；
}
img{
边界：无；
保证金：0；
}
a{
文字装饰：无；
}
保险商实验室{
列表样式：无；
}
/*容器*/
.集装箱{
浮动：左；
宽度：100%；
}
.内容{
宽度：64%；
保证金：0自动；
填充：30px0；
}
.盒子{
宽度：自动；
浮动：左；
}
.搜索框{
宽度：23.3%；
保证金：0；
}
.小盒子{
宽度：22.75%；
保证金权利：3%；
利润率最高：3%；
}
.过滤城市{
宽度：100%；
边距：0！重要；
填充：0！重要；
}
.过滤城市输入{
宽度：80%；
边界：0！重要；
背景色：红色；
右边距：0！重要；
右边填充：0；
}
.过滤城市按钮{
宽度：20%；
左边距：0！重要；
颜色：$白色；
背景色：$原色；
右边距：0！重要；
}

如果您只需添加

filter-city {
    display: flex;
    ....
}

它应该会起作用

---

老实说，我不完全确定为什么会这样，但根据我的经验，flexbox可以解决大多数布局问题

您是否检查了Firebug或Chrome开发者工具中的“显示”功能？IIRC，input默认为块级元素，因此将“display:inline block；”之类的属性应用于必要的输入应该可以解决问题

您应该在需要相邻的div和包含的div上使用

float:left

。

问题似乎是由两件事引起的：

输入和按钮之间的空白

内联和内联块元素允许其他元素在一条线上位于它们旁边，其中包括空格。这两个元素之间的换行符会在它们之间引入一个不由您的百分比所占的空间。

水平按钮填充大于其计算宽度

该按钮具有

填充：15px

，可设置水平和垂直填充。但您示例中的按钮宽度小于15px，因此，即使使用

框大小：边框框

，按钮的宽度也比您的百分比大。

下面是一个工作示例：

.container{
浮动：左；
宽度：100%；
}
.内容{
宽度：64%；
保证金：0自动；
填充：30px0；
}
.盒子{
浮动：左；
}
.搜索框{
宽度：23.3%；
}
.小盒子{
宽度：22.75%；
保证金权利：3%；
利润率最高：3%；
}
.过滤城市输入，
.过滤城市按钮{
填充：15px0；
保证金：0；
边界：0；
}
.过滤城市输入{
宽度：80%；
背景色：红色；
}
.过滤城市按钮{
宽度：20%；
背景颜色：浅灰色；
}

测验