CSS the a blocks move to right when enclosed by ul, li, /li tags

I am using a combination of ul and li tags for a menu and I use display box and a background color to display it as buttons the problems is as soon as I enclose the a tags using li the buttons seem to be shifting to the right a bit like a indentation or something .

I tried

list-style: none;

but that doesnt work could anyone suggest a workaround this problem..

Thanks any help would be appreciated

Thanks ev开发者_开发问答eryone for the effort +1 to all answers

Set padding-left and margin-left on the ul to 0.

Have you reset the default margin and padding styles?

ul,li {
margin:0;
padding:0;
}

You should check the margin and padding of the UL and LI elements, and set them to a specific value. Such as:

margin: 0;
padding: 5px;

A UL is typically styled to display with an indentation from the left, although it might also be the LI in some browsers (I believe).

In Firefox (w/Firebug), Chrome and IE9, you can inspect the applied styles using the developer tools available. This really helps to understand where issues are cropping up like this in your displayed elements.

http://getfirebug.com/html

Also, just in case you haven't seen it before, look at the box model:

http://www.w3.org/TR/CSS2/box.html

A ul and/or li element will be given a default margin and/or padding by the browser. Try adding margin: 0; padding: 0 to your ul, li {}.

Better still, use a CSS Reset to save you the hassle with this, and many other, elements. I recommend this one: http://meyerweb.com/eric/tools/css/reset/