横向柱状图的CSS写法

1

/*
UI Object */

2

.h_graph
ul{

margin

:

0

50px

0

50px

;

padding

:

1px

0

0

0

;

border

:

1px

solid

#ddd

;

border-top

:

0

;

border-right

:

0

;

font-size

:

11px

;

font-family

:

Tahoma

,
Geneva,

sans-serif

;

list-style

:

none

}

3

.h_graph
li{

position

:

relative

;

margin

:

10px

0

;

vertical-align

:

top

;

white-space

:

nowrap

}

4

.h_graph
.g_term{

position

:

absolute

;

top

:

0

;

left

:

-50px

;

width

:

40px

;

font-weight

:

bold

;

color

:

#767676

;

line-height

:

20px

;

text-align

:

right

}

5

.h_graph
.g_bar{

display

:inline-

block

;

position

:

relative

;

height

:

20px

;

border

:

1px

solid

#ccc

;

border-left

:

0

;

background

:

#e9e9e9

}

6

.h_graph
.g_bar span{

position

:

absolute

;

top

:

0

;

right

:

-50px

;

width

:

40px

;

color

:

#767676

;

line-height

:

20px

}

7

/*
//UI Object */

01

<!--
UI Object -->

02

<

div

class

=

"h_graph"

>

03

<

ul

>

04

<

li

><

span

class

=

"g_term"

>SUN</

span

><

span

class

=

"g_bar"

style

=

"width:0%"

><

span

>0%</

span

></

span

></

li

>

05

<

li

><

span

class

=

"g_term"

>MON</

span

><

span

class

=

"g_bar"

style

=

"width:20%"

><

span

>20%</

span

></

span

></

li

>

06

<

li

><

span

class

=

"g_term"

>TUE</

span

><

span

class

=

"g_bar"

style

=

"width:30%"

><

span

>30%</

span

></

span

></

li

>

07

<

li

><

span

class

=

"g_term"

>WED</

span

><

span

class

=

"g_bar"

style

=

"width:40%"

><

span

>40%</

span

></

span

></

li

>

08

<

li

><

span

class

=

"g_term"

>THU</

span

><

span

class

=

"g_bar"

style

=

"width:50%"

><

span

>50%</

span

></

span

></

li

>

09

<

li

><

span

class

=

"g_term"

>FRI</

span

><

span

class

=

"g_bar"

style

=

"width:60%"

><

span

>60%</

span

></

span

></

li

>

10

<

li

><

span

class

=

"g_term"

>SAT</

span

><

span

class

=

"g_bar"

style

=

"width:100%"

><

span

>100%</

span

></

span

></

li

>

11

</

ul

>

12

</

div

>

13

<!--
//UI Object -->