0

0

求助:为何中间的导航条无法居中?_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 12:09:51

|

1135人浏览过

|

来源于php中文网

原创

中间的导航条无论如何都不能居中 ?rz..本人刚开始学html和css,菜鸟一个,望各位高手能指点一二,谢谢!


css代码:

body {
background:#efefef;
text-align:center;
margin:0;
padding:0;
}

#main {
width:950px;
background:#fffacd;
margin:0 auto;
padding:0;
}

#header {
background:#0ff ;
height:180px;
width:950px;
margin:0 auto;
text-align:center;
}

#logo {
background:#044 url(logo.jpg) no-repeat;
width:950px;
height:150px;
margin:0;
padding:0;
}

/********************navbar******************/


#navbar {
margin:0 auto;
padding:0;
background:#ccc;
width:auto;
height:30px;
text-align:center;
}

#navbar ul {
list-style-type:none;
background:#CDB7B5;
width:auto;
margin:0 auto;
padding:0 auto;
height:30px;
clear:both;
}

#navbar ul li {
display:block;
float:left;
width:auto;
  text-align:center;
}

#navbar ul li a {
padding:0 5px 0 5px;
height:30px;
float:left;
text-decoration:none;
background:#FFE1FF;
color:black;
line-height:1.5 em;

}

#navbar ul li a:hover {
color:#9C9C9C;
background:#CAE1FF;
}

#navbar .fg {
float:left;
width:1px;
height:30px;
background:black;
}

/********************************************/
#content {
background:#ffffe0;
width:950px;
padding:auto;
margin:auto;
overflow:hidden;
}

#footer {
background:#fff0f5;
width:950px;
height:100px;
padding:0;
margin:auto;
clear:both;
}

/*content内容 left,mid,right */
#left {
margin:0;
float:left;
width:200px;
}

#mid {
background:#0f0;
margin-top:0;
margin-left:4px;
float:left;
padding:0 auto;
width:562px;
height:250px;
}

#right {
background:#00f;
margin:0;
float:right;
width:180px;
padding:auto;
}


HTML:




nbsp;html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
test1






刺鸟创客
刺鸟创客

一款专业高效稳定的AI内容创作平台

下载

回复讨论(解决方案)

你是在哪个浏览器下面看的?

我看了IE6/7/8没跑啊!

在firefox3.6和IE7下都不行啊.
#navbar 在两个浏览器下都是靠左的。

我没看见靠左    可能你的空行太多了  你应用原格式看看!

还是不行啊,楼上的能不能留个QQ教我下?

dtd ? html 前面 ,文?的第一行……

TO 楼上
在Dreamweaver里copy了这么一段,但还是不行..郁闷...
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">


charset=gb2312" 改成 charset=utf-8"

检查你的标签是否配对,书写是否正确,例如下面这个嵌套就是错误的。



    的子元素只能是
  • body里面margin: 0px  auto

    呃..问题还是没解决..先自己多看看书再来提问,谢谢各位的回答了!

    #navbar ul li a {
    padding:0 5px 0 5px;
    height:30px;/*你这里我给你写的具体值,你可以跟100%*/
    float:left;
    text-decoration:none;
    background:#FFE1FF;
    color:black;
    line-height:1.5 em;这是你的源代码。在line-height里面;你给单位打了空格无效,出去空格,将值改为1.7em就可以,这样出现;
    #navbar ul {
    list-style-type:none;
    background:;
    width:200px;
    margin:0 auto;
    height:30px;看这个我给你把宽固定了才行,ul是块级元素你给它宽和他的父级元素一样大了。你在夫级里面只是控制到里面的容器,对内容没控制到,除非你重新布局安排ul;好早的帖子,可能对你都没用了;

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

9

2026.01.16

java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

31

2026.01.15

Java音频处理教程汇总
Java音频处理教程汇总

本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

14

2026.01.15

windows查看wifi密码教程大全
windows查看wifi密码教程大全

本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

42

2026.01.15

浏览器缓存清理方法汇总
浏览器缓存清理方法汇总

本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

6

2026.01.15

ps图片相关教程汇总
ps图片相关教程汇总

本专题整合了ps图片设置相关教程合集,阅读专题下面的文章了解更多详细内容。

9

2026.01.15

ppt一键生成相关合集
ppt一键生成相关合集

本专题整合了ppt一键生成相关教程汇总,阅读专题下面的的文章了解更多详细内容。

6

2026.01.15

php图片上传教程汇总
php图片上传教程汇总

本专题整合了php图片上传相关教程,阅读专题下面的文章了解更多详细教程。

2

2026.01.15

phpstorm相关教程大全
phpstorm相关教程大全

本专题整合了phpstorm相关教程汇总,阅读专题下面的文章了解更多详细内容。

4

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号