请选择进入手机版 | 继续访问电脑版

收藏本站腾讯微博新浪微博

邮件列表客服QQ 800003860 切换到窄版

点点网模板设计大赛

phpchina

蓝色理想最新研发动态 用悬赏三天解决问题解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动地图任务 邮件更新任务:保护帐号安全

积分换实物，来参加蓝色理想积分兑换吧！ 联系招聘客服蓝色理想帮你找工作！ 万元奖励等你拿——点点网模板设计大赛

经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › 谁说Float菜单不可以水平居中

发新帖

查看: 7122|回复: 36

[教程] 谁说Float菜单不可以水平居中 [复制链接]

goos　楼主

锅巴三月三

荣誉管理 

帖子: 2031
体力: 3739
威望: 15
居住地: 北京市通州区

发表于 2009-6-15 10:51:48 |显示全部楼层

当HTML元素CSS属性float之后，很难让整体菜单水平居中，可是，我们会想办法来解决这个问题。

我们先写HTML代码，可以看出，跟一般的菜单没有区别。

提示：您可以先修改部分代码再运行

继续，我们需要添加CSS来修饰菜单元素

<!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" />
<title>center menu</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%;
}
.menu ul{
	font: 12px/30px "Times New Roman", Times, serif;
}
.menu ul li{
	float:left;
	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;
}
</style>
</head>

<body>
<div class="warp">
    <div class="menu">
        <ul>
            <li><a href="#">Menu one</a></li>
            <li><a href="#">Menu two</a></li>
            <li><a href="#">Menu three</a></li>
            <li><a href="#">Menu four</a></li>
            <li><a href="#">Menu five</a></li>
            <li><a href="#">Menu one</a></li>
            <li><a href="#">Menu two</a></li>
            <li><a href="#">Menu three</a></li>
            <li><a href="#">Menu four</a></li>
            <li><a href="#">Menu five</a></li>
        </ul>
    </div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

看来，还是延续了float无法居中的事实。我们需要动小手术，不是hack

<!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" />
<title>center menu</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;
        position:relative;
	left:50%;
	margin:0 auto;
}
.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;
}
</style>
</head>

<body>
<div class="warp">
    <div class="menu">
        <ul>
            <li><a href="#">Menu one</a></li>
            <li><a href="#">Menu two</a></li>
            <li><a href="#">Menu three</a></li>
            <li><a href="#">Menu four</a></li>
            <li><a href="#">Menu five</a></li>
            <li><a href="#">Menu one</a></li>
            <li><a href="#">Menu two</a></li>
            <li><a href="#">Menu three</a></li>
            <li><a href="#">Menu four</a></li>
            <li><a href="#">Menu five</a></li>
        </ul>
    </div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

似乎还有些小问题哦。我们用个hack吧，让菜单背景看起来舒服些。

<!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" />
<title>center menu</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><a href="#">Menu one</a></li>
            <li><a href="#">Menu two</a></li>
            <li><a href="#">Menu three</a></li>
            <li><a href="#">Menu four</a></li>
            <li><a href="#">Menu five</a></li>
            <li><a href="#">Menu one</a></li>
            <li><a href="#">Menu two</a></li>
            <li><a href="#">Menu three</a></li>
            <li><a href="#">Menu four</a></li>
            <li><a href="#">Menu five</a></li>
        </ul>
    </div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

嗯，可以了，我们让float的菜单居中了。

主要的CSS手法：

position:relative;
以后，我们可以使用 CSS 的 left 属性
再次设置position:relative;让他（ul）的子元素right:50%归还

已有 1 人评分	威望	收起理由
greengnn	+ 3	+分

总评分: 威望 + 3 查看全部评分

西部数码顶级域名注册商39元抢注！

使用道具举报

中级会员 

帖子: 174
体力: 275
威望: 0

发表于 2009-6-15 10:58:53 |显示全部楼层

感觉给li设个display:inline-block;就解决了。

weisuo.me

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

帖子: 234
体力: 746
威望: 0

发表于 2009-6-15 11:49:51 |显示全部楼层

先顶一下楼主有点意思赞一个！
个人有几点小意见：
①menu没必要再套一个div 个人认为一个导航基本一个div就可以搞定了
②我觉得字体、高度什么的还是应该在a里控制比较好
③不建议用对a进行padding的设置看上去是block 但实际上并非如此在ie下鼠标移到链接字外并不能去触发a

<!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" />
<title>center menu</title>
<style type="text/css">
body{
	margin:20px;
	font-family:"Times New Roman", Times, serif;
	}
.menu{
	width:960px;
	margin:0 auto;
	background:#333;
	padding:5px 0;
	overflow:hidden;
	}
.menu ul{
	float:left;
	position:relative;
	left:50%;
	margin:0 auto;
	padding:0;
	list-style:none;
	}
.menu ul li{
	position:relative;
	right:50%;
	float:left;
	margin-left:2px;
	}
.menu ul li a{
	display:block;
	width:70px;
	height:30px;
	line-height:30px;
	background:#eee;
	text-align:center;
	text-decoration:none;
	font-size:12px;
	color:#f30;
}
.menu ul li a:hover{
	background:#08f;
	color:#fff;
}
</style>
</head>
<body>
<div class="menu">
  <ul>
    <li><a href="#">Menu one</a></li>
    <li><a href="#">Menu two</a></li>
    <li><a href="#">Menu three</a></li>
    <li><a href="#">Menu four</a></li>
    <li><a href="#">Menu five</a></li>
    <li><a href="#">Menu one</a></li>
    <li><a href="#">Menu two</a></li>
    <li><a href="#">Menu three</a></li>
    <li><a href="#">Menu four</a></li>
    <li><a href="#">Menu five</a></li>
  </ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

非洲小白脸

使用道具举报

做个好人

帖子: 1614
体力: 2579
威望: 0
居住地: 安徽省合肥市

发表于 2009-6-15 11:57:41 |显示全部楼层

方法不错,但出现水平滚动条了啊.

使用道具举报

帖子: 7047
体力: 3688
威望: 2

发表于 2009-6-15 12:18:55 |显示全部楼层

回复 3# nowar 的帖子

因为不套div的话right：50就会撑破布局。而套了div又何必用这么绕圈子的方法来实现居中。感觉lz的思路不太清晰

作为人，何谓正确。 http://goo.gl/eexPv

使用道具举报

叶飞雪

银牌会员 

帖子: 541
体力: 1138
威望: 3
居住地: 广东省深圳市

发表于 2009-6-15 12:26:20 |显示全部楼层

说真的，这种情况下用display:inline-block;方便多了

http://www.moondyzone.com

使用道具举报

goos　楼主

锅巴三月三

荣誉管理 

帖子: 2031
体力: 3739
威望: 15
居住地: 北京市通州区

发表于 2009-6-15 13:01:53 |显示全部楼层

横向居中的菜单，使用inline居多。
只是说明下，float也可以实现居中效果。

请关注下标题！

使用道具举报

goos　楼主

锅巴三月三

荣誉管理 

帖子: 2031
体力: 3739
威望: 15
居住地: 北京市通州区

发表于 2009-6-15 13:03:21 |显示全部楼层

回复 3# nowar 的帖子

多一个div只想页面居中而已。
并非问题主要所指

使用道具举报

帖子: 234
体力: 746
威望: 0

发表于 2009-6-15 13:12:12 |显示全部楼层

这么个意思哦···
收到

非洲小白脸

使用道具举报

忘穿秋水

银牌会员 

帖子: 677
体力: 1593
威望: 0
居住地: 广东省深圳市

发表于 2009-6-15 14:01:37 |显示全部楼层

楼主的方法不错。思路很好

不过dispaly:inline-block更好用点。呵呵……

使用道具举报

14px　

秋末

帖子: 1616
体力: 4211
威望: 52
居住地: 湖南省长沙市

发表于 2009-6-15 14:29:22 |显示全部楼层

因为position:relative + trbl的方法仅仅从外观上进行了改善，所以当li标签过多的时候产生水平滚动条，但LZ的思路还是很赞的，从这里又学到了不少东西。

小弟对此也略有研究，能在抛弃firefox2.0的情况下解决这个问题（据说这个版本的浏览器已经没几个人用了）。

提示：您可以先修改部分代码再运行

原文地址：http://www.14px.com/?p=125

[ 本帖最后由 14px 于 2009-6-15 14:30 编辑 ]

我的博客（14px.com）我的微博（t.qq.com/qweibo）

使用道具举报

帖子: 301
体力: 257
威望: 0
居住地: 广东省深圳市

发表于 2009-6-15 14:38:32 |显示全部楼层

LZ火星了。我很早就用这个方法了。。

使用道具举报

goos　楼主

锅巴三月三

荣誉管理 

帖子: 2031
体力: 3739
威望: 15
居住地: 北京市通州区

发表于 2009-6-15 15:09:42 |显示全部楼层

回复 12# nick03 的帖子

火星你可以围观，无妨！

使用道具举报

zj1118

帖子: 152
体力: 646
威望: 0

发表于 2009-6-15 16:06:13 |显示全部楼层

lz思路不错，学习。
第二个在IE下鼠标没有触发a，只有移到字上才有效果，而第三个鼠标触发了a，整个a区域都有反应。
看了看css并没有什么区别啊，为什么？

使用道具举报

帖子: 344
体力: 1293
威望: 0
居住地: 广东省广州市

发表于 2009-6-15 20:11:09 |显示全部楼层

先收下,有时间仔细看看

使用道具举报

坏小猫

银牌会员 

帖子: 493
体力: 1381
威望: 4

发表于 2009-6-16 10:23:35 |显示全部楼层

相对定位+负的外边距

使用道具举报

分特

帖子: 1438
体力: 8931
威望: 1
居住地: 广东省深圳市

发表于 2009-6-17 12:02:58 |显示全部楼层

1、left:50%是说让它的左边位于50%宽度的位置吗？
2、left和right可以同时出现吗？比如left:30%，right:60%？

手中无剑，心中有剑；
家里没水，还能灌水！

使用道具举报

高级会员 

帖子: 273
体力: 638
威望: 2

发表于 2009-6-17 12:33:17 |显示全部楼层

学习了思路很好,

我也随便写了个汗一下, IE67 有问题,我再改改,IE8 FF OPERA最新和google的没有问题

[ 本帖最后由 chirsjie 于 2009-6-17 12:46 编辑 ]

web前端群:79228406,欢迎高手,新手一起讨论

使用道具举报

梨果凛

中级会员 

帖子: 108
体力: 447
威望: 1

发表于 2009-8-14 12:16:35 |显示全部楼层

先声明：我是传送门过来的，不是挖坟的呀。

我觉得两次相对定位的方法很巧妙。
特别是针对浮动需要居中的情况。
#16说的相对定位+负外边距不知道是指什么。

我处理横向排列的菜单水平居中的方法常用的是display:inline-block;
以后会试试使用浮动和相对定位来处理看看。
毕竟block比inline-block更好控制。

PS:悄悄的说个我发现的小问题。
又见<div class="warp">

warp
n. 变形, 弯曲, 歪曲, 乖僻, 偏差, 偏见
vt. 使变形, 弄歪, 使翘曲, 使不正常, 歪曲, 使有偏见
vi. 变弯, 变歪
【机】翘曲

wrap
n. 外套, 围巾, 包裹物, 限制, 约束, 秘密, 换行
vt. 包装, 卷, 缠绕, 包, 裹, 覆盖, 遮蔽, 隐藏, 掩护
vi. 缠绕, 穿外衣, 包起来
【计】换行

wrapper
n. 包装者, 包裹者, 包装物, 覆盖物, 外包烟叶, 包纸, 书的封皮, 妇女晨衣
【医】包裹料

以上内容摘自金山词霸百科释义。

看到过无数人混淆warp和wrap。
从语义和自注释的角度出发，
id无论是用wrap或者wrapper都是合情合理的。
而warp只能理解是笔误吧。
大范围的笔误呀，以讹传讹。

当然了，id嘛爱怎么定义都行，符合规范，不要以数字开头就行。。
我只是看到了随便说说，别较真。

认真你就输了。——不是我说的。

使用道具举报

帖子: 73
体力: 367
威望: 0
居住地: 辽宁省大连市

发表于 2009-8-17 23:24:31 |显示全部楼层

我是新手。不知道我这么写的利弊在哪里。哪位能指点下

提示：您可以先修改部分代码再运行

[ 本帖最后由 benzhuqq 于 2009-8-18 15:08 编辑 ]

使用道具举报

步舞之鹤

金牌会员 

帖子: 1859
体力: 4403
威望: 16
居住地: 浙江省杭州市

发表于 2009-8-18 09:09:48 |显示全部楼层

你的ul是固定宽度的。

使用道具举报

Emiw

帖子: 48
体力: 380
威望: 0

发表于 2009-8-19 16:41:55 |显示全部楼层

我觉得思路很好阿。。

使用道具举报

zhaoliancheng　

我爱红茶

银牌会员 

帖子: 665
体力: 2025
威望: 0
居住地: 重庆市九龙坡区

发表于 2009-8-20 14:31:32 |显示全部楼层

回复 20# benzhuqq 的帖子

弊端：

LZ的方法是在LI的个数未知整个UL居中，整个宽度是变化的，所以你这个20％只能用在某些地方

WEB前端132977627 nolure.com

使用道具举报

zhaoliancheng　

我爱红茶

银牌会员 

帖子: 665
体力: 2025
威望: 0
居住地: 重庆市九龙坡区

发表于 2009-8-20 14:32:28 |显示全部楼层

早就有这种文章了

跨浏览器实现float:center
http://www.blueidea.com/tech/web/2008/6130.asp

WEB前端132977627 nolure.com

使用道具举报

帖子: 145
体力: 2447
威望: 0

发表于 2009-8-20 22:01:31 |显示全部楼层

任何好的方法都值得推介。赞一个楼主。

另外BS下那些说火星或者早就看过的人，看过可以跳过，你要知道，还有很多人没看过，不知道。

使用道具举报

baihe107

金牌会员 

帖子: 1486
体力: 4644
威望: 1
居住地: 上海市浦东新区

发表于 2009-8-20 23:29:00 |显示全部楼层

在你的blog里面看过这个了，有幸来这里看LZ详细的讲解

使用道具举报

中级会员 

帖子: 307
体力: 268
威望: 3

发表于 2009-8-21 16:36:38 |显示全部楼层

这个很早就有了，
http://www.pmob.co.uk/
看看这个Centering那一块的内容

使用道具举报

帖子: 3036
体力: 2544
威望: 4

发表于 2009-12-18 20:14:55 |显示全部楼层

回复 11# 14px 的帖子

这个办法也很好，刚好今天用到了，谢谢

使用道具举报

xkck　

中级会员 

帖子: 91
体力: 334
威望: 0
居住地: 湖南省娄底市

发表于 2009-12-18 21:18:41 |显示全部楼层

这个效果一直在研究，先收藏了，有时间再慢慢研究。

使用道具举报

yoom　

木匠的背篓

帖子: 4900
体力: 14517
威望: 18
居住地: 浙江省杭州市

发表于 2009-12-19 13:59:01 |显示全部楼层

<!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;list-style:none;}
#navigation{display:inline-block;padding:20px;border:solid 1px red;}
	#navigation li{height:30px;float:left;}
		#navigation li a{display:block;height:30px;float:left;background:#97C099 url(http://home.blueidea.com/attachment/200903/13/381636_1236958262fsCk.gif) left top no-repeat;padding-left:27px;overflow:hidden;color:#000;text-decoration:none;}
		#navigation li a span{display:block;height:30px;float:left;background:url(http://home.blueidea.com/attachment/200903/13/381636_1236958262fsCk.gif) right -352px no-repeat;padding-right:27px;cursor:pointer;line-height:33px;}
		#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>

<title>Untitled Document</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>

提示：您可以先修改部分代码再运行

以前做的一个，自适应，浮动，居中。
ucweb发的，看有没有问题。

集艺术之精湛于邮票。

使用道具举报

发新帖

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-2-11 02:26 , Processed in 0.135084 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部