수다닷컴

수평 그래프 부분을 꾸며보고 있는데요..
퍼센트 표시 영역(15%, 25% 등)을막대 그래프 오른쪽으로 보내려고 position:absolute를 주면 오른쪽 그림과 같이 막대가 사라집니다.
아무리 봐도 원인을 모르겠네요.
뭘 잘 못했는지 좀 알려주세요~

[style]
* {font-size:12px; margin:0; padding:0;}
ul {list-style:none;}
.graphArea {width:275px; height:200px; font-size:11px; letter-spacing:-1px; margin:20px;}
.hGraph {padding:0 20px 20px 50px; border: 1px solid green;}
.hGraph .gLabel {width:40px; display:inline-block; margin:0 0 0 -43px; position:absolute; text-align:right;}
.hGraph .gBar {display:inline-block; height:100%; position:relative; background-color:#ccc;}
.hGraph .gBar span {width:30px; display:inline-block; position:absolute; top:0; right:0;}
.hGraph ul {border:1px solid #ccc; border-right:0; border-top:0; padding-top:1px;}
.hGraph li {position:relative; line-height:20px; margin:15px 0; vertical-align:top; white-space:nowrap;}

[html]
div class=graphArea
div class=hGraph
ul
lispan class=gLabel특급/spanspan class=gBar style=width:15%span15%/span/span/li
lispan class=gLabel고급/spanspan class=gBar style=width:25%span25%/span/span/li
lispan class=gLabel중급/spanspan class=gBar style=width:35%span35%/span/span/li
lispan class=gLabel초급/spanspan class=gBar style=width:100%span25%/span/span/li
/ul
/div
/div

신청하기