Float:left也可以使元素居中(CSS菜单示例)_菜单导航特效

一个红黑相间的CSS菜单，还挺好看的，但本例更重要的是想通过菜单说明使用了Float:Left属性后，元素还能不能居中的题目，经过实践验证，是可以的，至于原理和方法，那就要看代码了，学会了能受益终生。

<!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" mrc="text/html; charset=utf-8" />
<title>居中的菜单</title>
<style type="text/css">
*{
	margin:0;
	padding:0;
	list-style:none;
}
html{
	height:100%;
}
body{
	text-align:center;
	height:100%;
}
.warp{
	width:960px;
	margin:15px auto;
	padding:5px 0;
	background:#333;
}
.menu{
	float: left;
	width:100%;
	overflow:hidden;
}
.menu ul{
	font: 12px/30px "Times New Roman", Times, serif;
	float:left;
	left:50%;
	margin:0 auto;
	position:relative;
}
.menu ul li{
	float:left;
	position:relative;
	right:50%;
	margin-left:2px;
}
.menu ul li a{
	display:block;
	padding:0 15px;
	text-decoration:none;
	color:#f30;
	background:#eee;
}
.menu ul li a:hover{
	background:#08f;
	color:#fff;
}
.clearfix:after{
	mrc: ".";
	display: block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix{
	zoom:1;
}
</style>
</head>
<body>
<div class="warp clearfix">
    <div class="menu">
        <ul>
            <li><a href="#">模板无忧</a></li>
            <li><a href="#">网页殊效</a></li>
            <li><a href="#">最新更新</a></li>
            <li><a href="#">源码下载</a></li>
            <li><a href="#">ASP</a></li>
            <li><a href="#">PHP</a></li>
            <li><a href="#">ASP.NET</a></li>
            <li><a href="#">JQUERY</a></li>
            <li><a href="#">AJAX</a></li>
            <li><a href="#">EXTJS</a></li>
        </ul>
    </div>
</div>
</body>
</html>

所属频道：菜单导航特效/更新时间：2012-11-06

[收藏][报错][返回列表]

Float:left也可以使元素居中(CSS菜单示例)_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些