当前位置：首页 → 问答吧 → 如何让导航居中??

如何让导航居中??

时间：2010-09-20

来源：互联网

<!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>Admin_Nav</title> <link href="CSS/admin_css.css" rel="stylesheet" type="text/css" /> <style> #SysNav {height:40px; margin:0px auto;line-height:40px; color:#FFFFFF; font-family:黑体;} #SysNav h5 {border-left:#FFFFFF 1px solid; float:left;font-size:13px; font-weight:bold; height:40px; padding:0px 10px;} </style> </head> <body id="Admin_Nav"> <div id="SysNav"> <h5>管理首页</h5> <h5>基本设置</h5> <h5>简介管理</h5> <h5>文章管理</h5> <h5>相册管理</h5> <h5>视频管理</h5> <h5>音乐管理</h5> <h5>留言管理</h5> <h5>菜单管理</h5> <h5>密码管理</h5> <h5>系统帮助</h5> <h5> </h5> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 fling 于 2010-9-20 15:24 编辑 ]

作者: fling 发布时间: 2010-09-20

复制内容到剪贴板

代码:

<!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>Admin_Nav</title>
<link href="CSS/admin_css.css" rel="stylesheet" type="text/css" />
<style>
#SysNav {height:40px; margin:0px auto;line-height:40px; color:#FFFFFF; font-family:黑体;}
#SysNav h5 {border-left:#FFFFFF 1px solid; float:left;font-size:13px; font-weight:bold; height:40px; padding:0px 10px;}
</style>
</head>
<body id="Admin_Nav">
<div id="SysNav">
      <h5>管理首页</h5>
      <h5>基本设置</h5>
      <h5>简介管理</h5>
      <h5>文章管理</h5>
      <h5>相册管理</h5>
      <h5>视频管理</h5>
      <h5>音乐管理</h5>
      <h5>留言管理</h5>
      <h5>菜单管理</h5>
      <h5>密码管理</h5>
      <h5>系统帮助</h5>
      <h5> </h5>
</div>
</body>
</html>

[ 本帖最后由 fling 于 2010-9-20 15:24 编辑 ]

作者: fling 发布时间: 2010-09-20

尽量别写内联样式： <body id="Admin_Nav" style="height:40px; margin:0px auto;line-height:40px; color:#FFFFFF; font-family:黑体;">
给body将宽度设置成100%，然后给你的导航设一个固定宽度，写上margin:0 auto，让其居中显示

[ 本帖最后由 xuexianli 于 2010-9-20 15:52 编辑 ]

作者: xuexianli 发布时间: 2010-09-20

我这个叶子主要是父容器宽度为100%
如果子容器浮动的话,就不知道怎么让它居中了。
如果在父容器中使用text-align:center;而子容器不使用浮动，使用 display:inline-block;那么是可以居中显示的。
但是这样的话，把块级元素变成内联元素后中间有一点空隙无法达到想要的效果！

主要是想要代码相当简单明了，所以才在这个问题上纠结了半天！

[ 本帖最后由 fling 于 2010-9-20 15:35 编辑 ]

作者: fling 发布时间: 2010-09-20

OK！
解决了
呵呵
在子容器上加了个margin-left:-8px;使子容器位置向左移动空隙的距离，
但是不知道在margin中使用负数对兼容性有没有影响！！

作者: fling 发布时间: 2010-09-20