Question

我正在使用React实现的CSS库的一部分，实现进度条。它在css端的测试中效果很好，但是一旦我在react中实现它，实际的填充条就位于其容器之外。它坐下来几个像素。我意识到CSS测试在测试文件中没有<!DOCTYPE html>。添加它会破坏样式，或显示我已经破坏的样式。

我设法换掉了

.progress-bar > * {
    background: #008be1;
    height: 4px;
    display: inline-block;
}

为

.progress-bar > * {
    background: #008be1;
    height: 4px;
    float: left;
}

但是我不知道为什么要修复它，或者为什么它首先不起作用。高度是给定的，它是块父级内部的inline-block元素。没有边距或填充。为什么子div偏移而不是包含在父中？

Answer 1

从该类中删除display：inline-block和float。为什么还要添加这些

.progress-bar > * { background: #008be1; height: 4px; }