Html css中的漏斗图

我正试图根据我通过第页的数据库呈现的数据定制漏斗图。 除了用于图表的css渲染之外，所有这些都可以很好地工作

    <ul id="funnel-cht">
<li style="height:70px;width:50%;background-color:yellow">pendora</li>
<li style="height:70px;width:40%;background-color:#98bf26">pending</li>
<li style="height:70px;width:30%;background-color:orange">pen</li>
<li style="height:70px;width:20%;background-color:#c10000">Test</li>
</ul>

潘多拉
高度：70px；宽度：40%；背景色：待定
钢笔
测试

这就是它现在的样子-

例如，我想根据实际的漏斗图来设计它-

---

我将如何设置此图表的样式以使其对我有意义。

如果我从评论中看到，您只需要将

元素居中，就可以设置自动边距

#funnel-cht>li
{
    display:block;
    margin:0 auto;
}

---

如果，正如我从评论中读到的，您只需要将

元素居中，就可以设置自动边距

#funnel-cht>li
{
    display:block;
    margin:0 auto;
}

---

秘诀是对

li

s使用

margin:0 auto

。设置左/右标注的自动边距计算将使块元素水平居中。（不幸的是，这种技术不适用于垂直居中，但情况不同。）

以下是您的代码，在一个工作示例中稍加修改：

ul，li{margin:0；padding:0；列表样式：none；}
ul{宽度：400px；}
li{高度：70px；边距：0自动；}
/*注意：将CSS分配给一组
统一元素不是每个li一个类，但现在让我们保持简单*/
li.li1{宽度：50%；背景色：黄色；}
li.li2{宽度：40%；背景色：#98bf26；}
li.li3{宽度：30%；背景色：橙色；}
li.li4{宽度：20%；背景色：#c10000；}

潘多拉
待定
笔
试验

秘诀是对

li

s使用

margin:0 auto

。设置左/右标注的自动边距计算将使块元素水平居中。（不幸的是，这种技术不适用于垂直居中，但情况不同。）

以下是您的代码，在一个工作示例中稍加修改：

ul，li{margin:0；padding:0；列表样式：none；}
ul{宽度：400px；}
li{高度：70px；边距：0自动；}
/*注意：将CSS分配给一组
统一元素不是每个li一个类，但现在让我们保持简单*/
li.li1{宽度：50%；背景色：黄色；}
li.li2{宽度：40%；背景色：#98bf26；}
li.li3{宽度：30%；背景色：橙色；}
li.li4{宽度：20%；背景色：#c10000；}

潘多拉
待定
笔
试验

漏斗外部{宽度：420px；浮动：左侧；位置：相对；填充：0 10%；}
.funnel_外部*{框大小：边框框}
.u外部ul{边距：0；填充：0；}
.funnel_外部ul li{float:左；位置：相对；边距：2px 0；高度：50px；清除：两个；文本对齐：中心；宽度：100%；列表样式：无}
.funnel_外部li span{边框顶部宽度：50px；边框顶部样式：实心；边框左侧：25px实心透明；边框右侧：25px实心透明；高度：0；显示：内联块；垂直对齐：中间；}
.funnel_step_1 span{宽度：100%；边框顶部颜色：#8080b6；}
.dunnel_step_2 span{宽度：calc（100%-50px）；边框顶部颜色：#669966}
.funnel_step_3 span{宽度：calc（100%-100px）；边框顶部颜色：#a27417}
.funnel_step_4 span{宽度：calc（100%-150px）；边框顶部颜色：#ff66cc}
.dunnel_step_5 span{宽度：calc（100%-200px）；边框顶部颜色：0099ff}
.funnel_step_6 span{宽度：calc（100%-250px）；边框顶部颜色：(027002}
.funnel_step_7 span{宽度：calc（100%-300px）；边框顶部颜色：#ff0000；}
.funnel_outer ul li:最后一个子跨度{左边框：0；右边框：0；边框顶部宽度：40px；}
.funnel_outer ul li.not_last span{边框左侧：5px实心透明；边框右侧：5px实心透明；边框顶部宽度：50px；}
.funnel_外部ul li span p{页边距顶部：-30px；颜色：#fff；字体大小：粗体；文本对齐：中间；}

1

2

3

4

5

6

7

漏斗外部{宽度：420px；浮动：左侧；位置：相对；填充：0 10%；}
.funnel_外部*{框大小：边框框}
.u外部ul{边距：0；填充：0；}
.funnel_外部ul li{float:左；位置：相对；边距：2px 0；高度：50px；清除：两个；文本对齐：中心；宽度：100%；列表样式：无}
.funnel_外部li span{边框顶部宽度：50px；边框顶部样式：实心；边框左侧：25px实心透明；边框右侧：25px实心透明；高度：0；显示：内联块；垂直对齐：中间；}
.funnel_step_1 span{宽度：100%；边框顶部颜色：#8080b6；}
.dunnel_step_2 span{宽度：calc（100%-50px）；边框顶部颜色：#669966}
.funnel_step_3 span{宽度：calc（100%-100px）；边框顶部颜色：#a27417}
.funnel_step_4 span{宽度：calc（100%-150px）；边框顶部颜色：#ff66cc}
.dunnel_step_5 span{宽度：calc（100%-200px）；边框顶部颜色：0099ff}
.funnel_step_6 span{宽度：calc（100%-250px）；边框顶部颜色：(027002}
.funnel_step_7 span{宽度：calc（100%-300px）；边框顶部颜色：#ff0000；}
.funnel_outer ul li:最后一个子跨度{左边框：0；右边框：0；边框顶部宽度：40px；}
.funnel_outer ul li.not_last span{边框左侧：5px实心透明；边框右侧：5px实心透明；边框顶部宽度：50px；}
.funnel_外部ul li span p{页边距顶部：-30px；颜色：#fff；字体大小：粗体；文本对齐：中间；}

1

2