Html 使用flexbox制作水平条形图-宽度未按预期工作

我试图通过将

ul

与

flexbox

网格相结合来创建一个水平条形图。出于某种原因，我的

li

s没有根据其宽度与图表上的正确线条对齐（很近，但有点偏离）：

部分{
宽度：300px；
位置：相对位置；
}
保险商实验室{
列表样式类型：无；
填充：0；
保证金：0；
填充：10px0；
}
ulli{
背景：红色；
颜色：#fff；
字号：700；
边缘顶部：10px；
}
李：第一个孩子{
边际上限：0；
}
div{
显示器：flex；
身高：100%；
宽度：100%；
位置：绝对位置；
排名：0；
左：0；
弹性：1；
z指数：-1；
证明内容：之间的空间；
柔性包装：nowrap；
填充：继承；
}
分区跨度{
宽度：1px；
身高：100%；
背景：灰色；
位置：相对位置；
}

Lorem
Ipsum
多洛
坐着
Emet
洛雷姆
Ipsum
多洛

再添加一对span标记

---

目前，10%的灰色水平条之间只有九（9）个空白。考虑背景，而不是大量代码：

ul{
列表样式类型：无；
宽度：300px；
保证金：0；
填充：0 10px；
溢出：自动；
背景：
重复线性渐变（向右，
透明0钙（100%-1px），灰色钙（100%-1px）100%）
0/calc（100%/10）100%；
左边框：1px纯色灰色；
}
ulli{
背景：红色；
颜色：#fff；
字号：700；
边缘顶部：10px；
}

Lorem
Ipsum
多洛
坐着
Emet
洛雷姆
Ipsum
多洛

这可能是一种更简单的方法：

.container{
显示器：flex；
柔性流：柱包裹；
背景颜色：浅灰色；
利润率：5%；
填充：1%；
宽度：86vw；
}
.侧边栏{
背景色：淡天蓝；
柔性生长：1；
利润率：1%；
填充：0.5%；
高度：10vh；
文本对齐：居中；
}
.sb1{
flex-grow:0；
宽度：50%；
}
.sb2{
flex-grow:0；
宽度：70%；
}
.sb3{
flex-grow:0；
宽度：80%；
}
.sb4{
flex-grow:0；
宽度：30%；
}
.sb5{
flex-grow:0；
宽度：40%；
}

我不明白。是什么引起了那个问题？。这就是问题所在@特马尼Afif@Pie他在这段代码中少了一行。你应该有11行，以便有10个空间，这是更容易与我的代码，因为我只需要重复梯度10倍+在左边的边界