让UL在div中居中并横排显示的方法

日期：2010-1-31 14:02:27 人气：数据载入中... [大中小]

推荐本页：

关键词：UL|div|居中|横排

大家都知道ul在div中一般都是纵向显示的，那么如何让其在div中横向显示呢，有朋友问到，不会要用marin-left吧？告诉大家，不用的，来看我的实例代码，你就明白了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>如何让UL在div中居中，并且横排显示-金电网jdxz.net</TITLE> <FCK:META NAME="Generator" CONTENT="EditPlus" /> <FCK:META NAME="Author" CONTENT="" /> <FCK:META NAME="Keywords" CONTENT="" /> <FCK:META NAME="Description" CONTENT="" /> <style> div,ul{padding:0;margin:0;} #header{width:900px;border:1px red solid;height:90px;text-align:center;} #header ul{width:500px;border:1px red solid;height:30px;margin:0 auto;} #header ul li{float:left;padding:0 10px 0 10px;list-style-type:none;} </style> </HEAD> <BODY> <div id="header"> <ul> <li>金电网</li> <li>金电网</li> <li>金电网</li> <li>金电网</li> <li>金电网</li> <li>金电网</li> <li>金电网</li> </ul> </div> </BODY> </HTML>
提示：可修改后代码再运行!

　　怎么样，显示的对吗？来分析一下吧。首先定义div,ul的属性为padding:0;margin:0;接下来，定义一个div值，让其等于一定的宽度，我这里写的是header{width:900px;}，那么下边就容易多了。ul也定义一个宽度，并居中显示。好了，学会了吗？

出处：新浪科技作者：金电下载网整理本文章由阿军搜集整理发布

热点文章

推荐文章

	评论人	评论内容摘要(共 0 条，查看完整内容) 得分 0 分	发表时间