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"   />
< style  type ="text/css" >
body { font-family : Verdana,Arial,sans-serif ; font-size : 12px ; margin : 10px auto ; text-align : center ; }
#navigation { display : inline-block ; padding : 20px ;  border : 1px solid red ; }
ul { margin : 0 ; padding : 0 ; list-style : none ; }
#navigation li { height : 30px ; float : left ; }
#navigation li a { float : left ; height : 30px ; line-height : 30px ; padding : 0 23px ; background : #97C099 ;  text-decoration : none ; }
#navigation li a:hover { background : #59c099 ; color : #fff ; }
</ style >
<!-- [if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif] -->
< title > float菜单局中一法 </ title >
</ head >
< body >
< ul  id ="navigation" >
     < li >< a  href ="#" > Home Home Home </ a ></ li >
     < li >< a  href ="#" > News </ a ></ li >
     < li >< a  href ="#" > Store </ a ></ li >
     < li >< a  href ="#" > Group </ a ></ li >
     < li >< a  href ="#" > Community </ a ></ li >
     < li >< a  href ="#" > Help </ a ></ li >
     < li >< a  href ="#" > Home </ a ></ li >
     < li >< a  href ="#" > News </ a ></ li >    
</ ul >
</ body >
</ html >

 

转载于:https://www.cnblogs.com/zhuyezi/archive/2009/12/29/1634753.html