Yesterday I saw a post posted by Goos using ucweb: Who said that the Float menu cannot be centered horizontally? I went in and looked at it. I felt that the method was a bit cumbersome, and I used negative margins, position:relative; and a little hack.
I have an easier way here, first show it:
Actually, I should have another div outside, but I gave it up in order to reduce carbon emissions.
Run the code box
<!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:120px auto;text-align:center;}
ul{margin:0;padding:0;list-style:none;}
#navigation{display:inline-block;border:solid 1px red;padding:20px;}
#navigation li{height:30px;float:left;}
#navigation li a{float:left;height:30px;line-height:30px;padding:0 23px;background:#97C099;}
#navigation li a:hover{background:#59c099;color:#ffff;}
</style>
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
<title>Float menu room method</title>
</head>
<body>
<ul id="navigation">
<li><a href="#">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>
</ul>
</body>
</html>
[Ctrl+A All selection tips: You can modify some code first, and then press Run]
The most important thing is this sentence:
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
In order to take care of the lower version of IE, conditional annotations are used here. It seems that in IE7, the function of display:inline; is equivalent to inline-block;.
Sliding door navigation evolved from the above code:
Run the code box
<!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:120px auto;text-align:center;}
ul{margin:0;padding:0;list-style:none;}
#navigation{display:inline-block;padding:20px;border:solid 1px red;}
#navigation li{height:30px;float:left;}
#navigation li a{float:left;background:#97C099 url(<a href=") left top no-repeat;padding-left:27px;height:30px;overflow:hidden;}
#navigation li a span{height:30px;float:left;background:url(<a href=") right -352px no-repeat;padding-right:27px;line-height:33px;cursor:hand;}
#navigation li a:hover,#navigation li.current a{background-position:left -176px;color:#009;background-color:#8597B5;}
#navigation li a:hover span,#navigation li.current a span{background-position:right -528px;}
#navigation li.current a{font-weight:bold;}
</style>
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
<title>Update to sliding door style according to the above code</title>
</head>
<body>
<ul id="navigation">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>News</span></a></li>
<li class="current"><a href="#"><span>Store</span></a></li>
<li><a href="#"><span>Group</span></a></li>
<li><a href="#"><span>Community</span></a></li>
<li><a href="#"><span>Help</span></a></li>
</ul>
</body>
</html>
[Ctrl+A All selection tips: You can modify some code first, and then press Run]
Among them, it is necessary to explain these two sentences so as not to be considered redundant:
#navigation li a{overflow:hidden;} /* Hide the extra 3px that IE5.5 and 6, isn't a 3px bug! Because height:30px;line-height:33px; in IE5.5 and 6, the height is 33px. */
#navigation li a span{cursor:hand;}/* Take care of the bugs that the mouse on the span does not look like a hand shape. In addition, IE5.5 does not support cursor:pointer; but IE all versions know cursor:hand;*/
After completion, the disadvantage is that writing a line of conditional comments is like the sand in your eyes for those who have xhtml morbidity. If you want to remove it, then you can use hacks! hehe!
No problems were found in safari4, chorme, opera10, ie5.5, 5, 6, 7, ff3.