float居中菜单(一)

 

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 无标题文档 </ title >
< style >
body {  text-align : center ;  margin : 0 auto ;  background : #333 ; }
#menu {  font-family : Arial, Helvetica, sans-serif ;  font-size : 12px ; display : inline-block ;  *display : inline ;  zoom : 1 ; }
#menu ul {  margin : 0 ;  padding : 0 ;  list-style : none ; }
#menu li {  float : left ;  border : 1px solid #FFF ;   margin : 2px ;  background : #666 ;  padding : 2px ; }  
#menu li a {  float : left ; background : #999 ;  text-decoration : none ;  color : #FFF ;  padding : 6px ; }
#menu li a:hover {  background : green ; }                 
</ style >
</ head >

< body >
< div  id ="menu" >
  < ul >
        < li >< a  href ="" > menu one </ a ></ li >
        < li >< a  href ="" > menu two </ a ></ li >
        < li >< a  href ="" > menu three one two two </ a ></ li >
        < li >< a  href ="" > menu fore </ a ></ li >  
        < li >< a  href ="" > menu five </ a ></ li >
        < li >< a  href ="" > menu six </ a ></ li >  
        < li >< a  href ="" > menu one </ a ></ li >
        < li >< a  href ="" > menu two </ a ></ li >  
        < li >< a  href ="" > menu three </ a ></ li >
        < li >< a  href ="" > menu fore </ a ></ li >   
  </ ul >
</ div >

</ body >
</ html >