Yesterday I saw a post from goos using ucweb: Who said that the Float menu cannot be centered horizontally ? I went in and took a look, and found that the method was a bit cumbersome, using negative margins, position:relativel; and a few hacks.
I have a simpler way here, which I will show first:
In fact, I should have put another div outside, but in order to reduce carbon emissions, I discarded it.
Run 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:#fff;}
</style>
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
<title>float menu one way to win</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 Select All Tips: You can modify part of the code first and then press Run]
The most crucial one is this sentence:
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
In order to take care of lower versions of IE, conditional comments are used here. It feels that in IE7 and below, the function of display:inline; is equivalent to inline-block;.
Sliding door navigation evolved from the above code:
Run 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( ) 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>Upgrade 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 Select All Tips: You can modify part of the code first and then press Run]
Among them, these two sentences need to be explained to avoid being considered redundant:
#navigation li a{overflow:hidden;} /* Hide the 3px dropped by IE5.5 and 6. It is not 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 bug in IE 5.5, 6, and 7 where the mouse does not display a hand shape when placed on span. In addition, IE5.5 does not support cursor:pointer; but all versions of IE recognize cursor:hand;*/
It's done. The disadvantage is that writing that line of conditional comments is like sand in the eyes for people with xhtml mysophobia. If you want to get rid of it, then there is no harm in using a hack! hehe!
No problem has been found in safari4, chrome, opera10, ie5.5, 5, 6, 7, ff3.