Html 如何在输入旁边的文本标签上应用CSS？

我有这个小代码包含一个文本（标签）和一个文本输入

我要找的是文本+输入占DIV的100%（即文本20%，输入80%），文本应该位于其中间，背景与输入高度相同。 我试着用span，用

背景色：蓝色在div上，但没有任何影响

你知道怎么做吗

先谢谢你


#区域过滤器{
宽度：100%；
}
尚普斯先生{
宽度：20%；
背景颜色：蓝色；
文本对齐：中间对齐；
颜色：白色；
}
#多向性{
宽度：80%；
浮动：对；
}

过滤器：
这是因为
标记是一个内联元素，因此它不能采用
宽度
/
高度
。将其显示为
内联块


正文{
保证金：0；
}
#分区过滤器{
宽度：100%；
}
尚普斯先生{
显示：内联块；
宽度：20%；
背景颜色：蓝色；
颜色：白色；
}
#多向性{
显示：内联块；
宽度：79.3%；
浮动：对；
}

过滤器：
如果你想使用
Flexbox
你可以在
input
上使用
flex:0 0 80%
，在
标签上使用
flex:1
以及它的
文本对齐：居中


.zoneFiltre{
显示器：flex；
}
尚普斯先生{
弹性：1；
背景颜色：蓝色；
文本对齐：居中；
颜色：白色；
}
#多向性{
弹性：0.80%；
}

过滤器：
如果您喜欢，可以使用
显示：表格


表单{
显示：表格；
边框：1px点黑色；
宽度：100%；
}
表格p{
显示：表格行；
}
标签，表格跨度{
显示：表格单元格；
填充：0.5em0；
}
标签{
背景：蓝色；
颜色：白色；
垂直对齐：顶部；
}
span输入，span文本区域{
框大小：边框框；
宽度：100%；
}
文本区{
显示：块；
}


标签：


较长的标签：


文本区域：

谢谢，它看起来好多了，但是标签和输入之间仍然有一个空白，可以让它像附件一样吗？@Chinovski这是因为body标签有一个默认边距，而输入标签有一个默认边框（只占4个像素，但不允许20%-80%）。您可以输入一个较低的百分比，也可以使用
calc
函数。@Chinovski请看我的编辑问题。现在我想这可能就是你想要的。谢谢你@Midas，这是我第一次看到这种方法