我正在開發一個純CSS圖表類型的圖形.這是它的精簡版：
jsfiddle.
如您所見,一些浮動div互相重疊.如果您增加清單項的高度,它可以正常工作：jsfiddle.
問題是我想保持高度小,我怎麼能這樣做而沒有div與他們的方式重疊？
HTML：
- X Comments
- X Notes
CSS：
#ratio {
float: left;
width: 100%;
}
#ratio_mid {
float: left;
height: 50px;
margin-top: 50px;
width: 100%;
}
#ratio_graph li {
border-bottom: 2px solid black;
border-radius: 3px;
border-top: 2px solid black;
float: left;
height: 46px;
list-style: outside none none;
padding: 0;
width: 10px;
}
.ratio_val {
border: 3px solid #000 !important;
border-radius: 5px;
font-weight: bold;
height: 24px !important
line-height: 23px;
text-align: center;
width: 100px !important;
}
.c-50 {background-color: rgb(255,0); margin-top:50px;}
.c-49 {background-color: rgb(252,2,0); margin-top:49px;}
...