Html 不在父div中的子级

据我所知，div中包含的按钮应该位于其内部。当我将它们显示为内联时就是这种情况，但是它们没有大小。当我将display设置为inline block时，它们显示在页面底部，但这次的大小正确。这是我第一次用css做一些事情，所以我对每件事的工作原理了解很少。 非常感谢您的帮助

html{
身高：100%；
}
身体{
身高：100%；
}
.滑块{
宽度：100%；
身高：20%；
溢出：隐藏；
位置：固定；
文本对齐：居中；
}
.图像容器{
宽度：300%；
身高：100%；
位置：相对位置；
明确：两者皆有；
过渡：右1s；
}
.幻灯片{
浮动：左；
宽度：33.333%；
}
#幻灯片1:target~.图像容器{
右：0%；
}
#幻灯片1：目标~.按钮>#按钮1{
不透明度：0.5；
}
#幻灯片2:target~.图像容器{
右：100%；
}
#幻灯片2：目标~.按钮>#按钮2{
不透明度：0.5；
}
#幻灯片3:target~.图像容器{
右：200%；
}
#幻灯片3：目标~.按钮>#按钮3{
不透明度：0.5；
}
.按钮{
位置：相对位置；
高度：1米；
底部：1米；
}
.按钮>a{
显示：内联块；
高度：1米；
宽度：1米；
边缘：0 1米；
填充：0；
边界半径：0.5em；
背景颜色：浅绿色；
}

幻灯片
{%block content%}{%endblock%}

内联元素的行为与普通文本一样。它们不能具有指定的宽度/高度，而是水平扩展以适合其内容，垂直扩展以匹配父元素的字体大小（除非为它们指定了字体大小）。在代码片段中有空的

元素，因此将它们设置为内联将导致它们收缩为零宽度。

如果有人遇到与屏幕截图相同的问题：

---

确保将图像的高度设置为100%，否则它会超出图像容器，并将所有内容都搞糟。显然，图像不会自行缩放以适应分区。

好的，但内联块有宽度和高度，应该位于父分区内？它确实位于父分区内。使用检查器进行验证。图像显示了我遇到的问题。