CSS: width of a <a>

I'm trying to do something pretty simple: an <a> tag with a background image. The code is found here, http://jsfiddle.net/QWatA/

The problem is that for some reason I can't set the width of the <a> tag in开发者_Python百科 this code. If I had just a normal background and set it with a width it works fine. However seems like if I do it this way I have no control over the width. Ideally I want all the links to have highlights of the same width.

The reason I'm doing this is that I want a different background image for each of the links, so I'm forced to define all those a.class1, a.class2 stuff.

Thanks!!

Add display:inline-block; to your 'a' elements. By default 'a' is display:inline and so does not establish box with width/height.

http://jsfiddle.net/QWatA/1/

yea c-smile beat me to it just put display: block in your css, however if your going to do a.class1, a.class2 and so on with new pictures put it in your ul li a instead of in the a.class1 a.class2 and so on then you only have to write the code once.