CSS Web design experience sharing: negative margin

Article Introduction: negative margin is a good thing.

The project completed last month, let me have a tangled n-hour module, first figure:

The default state is gray, without a circle, the completed state is red, the current display is yellow, and the circle is in the middle of two words, the last status is "successful" if it is gray, the line is less than the text, but the rest is consistent. The prototype code is as follows, for the JS structure of course the simpler the better:

<ul>
< li class= "status_finished" > Selection </li>
< li class= "status_current" > Reservation </li>
< li> payment </li>
< li> success </li>
</ul>

It's time to get tangled: the color of the circles around the circle is different, if cut together the last state to be applied alone without the right superfluous lines of the picture, is equal to cut two sets of drawings, the scheme to give up; if each state is only cut to the circle part, leave a blank on the right, it will appear in the middle of two words, But how does the next state continue to the left? There is a way: negative margin~ ~ ~

Enlarged Effect Chart:

The style is as follows:

UL {margin:36px auto; height:30px;}
UL li {float:left; width:164px; margin-right: -6px; padding-top:15px; text-align:right; Background:url ("Xxxx.gif") n O-repeat right xxpx; Color: #666; }
UL li.status_finished {background-position:right xxpx;}
UL li.status_current {background-position:right xxpx; font-weight:bold; color: #000;}

Note: When merging pictures, the right side of the circle should be set aside for 6px (the specific value is determined according to the actual situation) transparent void, the left line for adaptive consideration as long as possible.