HTML and CSS Reference
In-Depth Information
position
:
absolute
;
text-align
:
center
;
width
:
100%
;
}
.x-axis li
{
float
:
left
;
margin
:
0 15px
;
padding
:
5px 0
;
width
:
76px
;
}
The y-axis is a little more involved and requires a couple of tricks. We give it a
position:
absolute
to break it out of the normal flow of content, but anchored to its container. We
stretch out each
li
to the full width of the graph and add a border across the top. This will give
us some nice horizontal lines in the background.
Using the power of negative margins, we can offset the numerical labels inside the
span
so
that they shift up and to the left. Lovely!
/* y-axis */
.y-axis
{
color
:
#555
;
position
:
absolute
;
text-align
:
right
;
width
:
100%
;
}
.y-axis li
{
border-top
:
1px solid #ccc
;
display
:
block
;
height
:
62px
;
width
:
100%
;
}
.y-axis li span
{
