float:left的对象(导航)如何居中示例探讨

ttx9n · 发表于 2013-11-18 16:29:55

用float让导航文本水平居中确实个麻烦事，为了解决这个问题，我们可以把二者结合起来使用，大家可以参考下面的示例，或许会有所启发哦我们在做导航（nav）时，通常会用到float：left;但是这样做的话，让导航文本水平居中确实个麻烦事；

分析如下：

[float:left]有个伟大之处，它使div（或者其他标签）的宽度自适应其内容，但它却有个弊端：无法居中。
[display:inline-block]也有同样的特性，并且可以居中，但连续几个这样的东东，之间却会出现空格。

为了解决这个问题，我们可以把二者结合起来使用：

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]

[操作系统：Windows]

复制代码代码如下:
<!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>inline-block解决float:left对象无法居中的问题。</title>
<style type="text/css">
* { margin:0; padding:0; list-style:none;}
body { text-align:center;}
li { float:left; font-size:12px;}
a { float:left; border:1px solid #000; padding:5px 10px; text-decoration:none; color:#000;}
ul { display:inline-block; *display:inline; zoom:1;}
</style>
</head>
<body>
<ul>
<li><a href="#nogo">首页</a></li>
<li><a href="#nogo">关于</a></li>
<li><a href="#nogo">产品</a></li>
<li><a href="#nogo">联系我们</a></li>
<li><a href="#nogo">留言</a></li>
</ul>
</body>
</html>

醉梦娱乐网 · 发表于 2023-4-15 21:20:13

看看怎么样再说

5vulod · 发表于 2023-7-25 05:33:22

66666666666

u7yxn9 · 发表于 2023-9-11 09:23:40

我找了挺久终于找到了

.l4 · 发表于 2023-10-17 03:32:50

。。。。。。。。。。。。。。。

lba36h7g · 发表于 2023-12-4 00:53:55

天天源码社区。。。。

shw5ovr · 发表于 2024-3-2 06:12:24

还有人在不。。。。。。。。。。啊

3pjdk29w · 发表于 2024-3-5 09:33:29

来看看！！！

6q8s6p21 · 发表于 2024-3-6 05:38:50

额头额定法国队是范德萨

ki9ku6 · 发表于 2024-3-6 07:35:22

iiguuubhuiuihu

账号		自动登录	找回密码
密码			立即注册

[CSS] float:left的对象(导航)如何居中示例探讨

相关帖子