html - CSS inline-block not working? -

you can't imagine how frustrating create simple codes , don't work :( want code make nav horiz. , set width each separate between them

html:

   <ul>         <li><a href="#">home</a></li>         <li><a href="#">about</a></li>         <li><a href="#">what</a></li>         <li><a href="#">products</a></li>         <li><a href="#">support</a></li>   </ul> 

css:

body{margin:0;}   ul{list-style-type:none;margin:0;padding:0;display:block;} li{float:left;}   a{width:60;} 

i think might wanting links 60px wide. if that's case, change:

a{width:60;} 

to:

a { width: 60px; display: inline-block;} 

'60' on own isn't recognised measurement css width, , need inline-block stop being treated line of text.

however if want improve on this, , make each link separated same amount (as is, links closer others), i'd put margin on li, this:

li { margin-right: 40px; }