<分区>
<分区>
这是代码:https://jsfiddle.net/ohewuanx/
我正在使用 React 实现的 CSS 库的一部分，实现进度条。它在 css 端的测试中效果很好，但是当我在 react 中实现它时，实际填充的栏在其容器之外。它位于几个像素下方。我意识到 css 测试没有 <!DOCTYPE html>在测试文件中。添加它破坏了样式，或者暴露了我已经损坏的样式。
我设法通过换出来修复它
.progress-bar > * {
background: #008be1;
height: 4px;
display: inline-block;
}
对于
.progress-bar > * {
background: #008be1;
height: 4px;
float: left;
}
但我不知道为什么会修复它，或者为什么它一开始就不起作用。高度是给定的，它是 block 父元素中的行内 block 元素。不存在边距或填充。为什么子div偏移而不是包含在父div中？
最佳答案
从该类中删除 display:inline-block 和 float。为什么还要添加那些
.progress-bar > * {
背景:#008be1；
高度:4px；
}
关于html - 内联 block 元素在父元素外部，左浮动元素在父元素内部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55385829/