纯CSS怎么实现柱形图效果
这篇文章主要介绍纯CSS怎么实现柱形图效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
解释一下，ul里面的每一个li就代表我们要统计的内容，span为柱身，em为统计项的名字，strong为统计数值。我们可以添加一些背景颜色来区分他们。
.chart{
list-style:none;
font-family:'宋体';
font-size:14px;
border:1pxsolid#ccc;
margin:0;
padding:5px;
background:#F2F1D7;
}
.chartli{
width:400px;
background:#DDF3FF;
}
运行代码：
.chart{
list-style:none;
font-family:'宋体';
font-size:14px;
border:1pxsolid#ccc;
margin:0;
padding:5px;
background:#F2F1D7;
}
.chartli{
width:400px;
background:#DDF3FF;
}
但怎样把li弄成柱状呢？我们首先把li弄成并排显示，要达到这种效果，我们有两个方法：
1、把li的display变成inline，
2、把li变成浮动元素。
估量一翻，选择了后者，因为内联元素的盒子模型是难以控制的，margin与padding的计算会变得很复杂。既然选择后者，我们必须面对一个情况，就是浮动溢出了。
对策就是父元素也变成浮动元素。浮动容器会向内收缩，自适应子元素的高度与宽度。也就是说，我们专注于li的设计就可以了！为了让li表现得像柱子，我们让它的高比宽长很多，同时为了让大家好辩认每个li的范围，我先给它们加上边框！
.chart{
list-style:none;
font-family:'宋体';
font-size:14px;
border:1pxsolid#ccc;
margin:0;
padding:5px;
background:#F2F1D7;
float:left;
}
.chartli{
width:70px;
height:300px;
float:left;
background:#DDF3FF;
border:1pxsolidred;
}
运行代码：
.chart{
list-style:none;
font-family:'宋体';
font-size:14px;
border:1pxsolid#ccc;
margin:0;
padding:5px;
background:#F2F1D7;
float:left;
}
.chartli{
width:70px;
height:300px;
float:left;
background:#DDF3FF;
border:1pxsolidred;
}
以上是"纯CSS怎么实现柱形图效果"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！
