List - Width is always 100%

Question

Basically I'm making some buttons but even through I put the width as auto and set padding, the list still extends 100% of the page. I don't want to set the width in pixels, I just want to set the padding either side.

Can anyone please explain where I have gone wrong: http://jsfiddle.net/spadez/KYdnJ/5/

#nav li { 
    color: #333; 
    line-height: 28px; 
    background-color: #F8F8F8; 
    border: 1px solid #D3D3D3; 
    padding: 0px 9px 0px 9px; 
    font-family: arial, sans-serif; 
    font-size: 11px; 
    width: auto;
}

Answer 1

List items are similar to block-level elements in that their initial width value is equal to auto so by default they will span the width of their containing block if they aren't given a fixed size. You can either float or change the display value to inline-block; so that their width "shrinks to fit" its content, or you can just give the list-items a fixed width.

http://jsfiddle.net/KYdnJ/8/