Float:left也可以使元素居中（CSS菜单示例）

2024-09-05 12:20:19

字体：大中小

来源：转载

供稿：网友

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

<html><head><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{	content: ".";	display: block;	height:0;	clear:both;	visibility:hidden;}.clearfix{	zoom:1;}</style></head><body><div class="warp clearfix">    <div class="menu">        <ul>            <li>源码爱好者</li>            <li>网页特效</li>            <li>最新更新</li>            <li>源码下载</li>            <li>ASP</li>            <li>PHP</li>            <li>ASP.NET</li>            <li>JQUERY</li>            <li>AJAX</li>            <li>EXTJS</li>        </ul>    </div></div></body></html>

上一篇：DIV学写带动画的CSS+JS下拉导航条

下一篇：传统的菜单用CSS来实现（简单）