Home > Web Front-end > HTML Tutorial > Help: Why can't the middle navigation bar be centered? _html/css_WEB-ITnose

Help: Why can't the middle navigation bar be centered? _html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:09:51
Original
1045 people have browsed it

中间的导航条无论如何都不能居中 ?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:





test1







Reply to discussion (solution)

Which browser are you on? Seen below?

I looked at IE6/7/8 and it didn’t run!

It doesn’t work under Firefox 3.6 or IE7.
#navbar is to the left in both browsers.

I didn’t see it on the left. Maybe you have too many blank lines. Please use the original format to check!

It still doesn’t work. Can the guy upstairs leave a message on QQ to teach me?

In front of dtd ? html, the first line of the text...

TO Upstairs
I copied this paragraph in Dreamweaver, but it still doesn’t work.. Depressing.. .

transitional.dtd">


charset=gb2312" changed to charset=utf-8"

Check whether your tags match and whether the writing is correct Correct, for example, the following nesting is wrong.



The child elements of
    can only be
  • body margin: 0px auto

    Uh... the problem is still not solved ..Read more books yourself first before asking questions. Thank you for your answers!

    #navbar ul li a {
    padding:0 5px 0 5px;
    height:30px;/*The specific value I wrote for you here, you can follow 100%*/
    float:left;
    text-decoration:none;
    background:#FFE1FF;
    color:black;
    line-height:1.5 em; This is your source code. In line-height; it is invalid if you enter a space for the unit. Just remove the space and change the value to 1.7em, and it will appear like this;
    #navbar ul {
    list-style-type:none;
    background:;
    width:200px;
    margin:0 auto;
    height:30px; Look at this, I fixed the width for you. ul is a block-level element, you give it the width and its parent The level elements are as big as each other. In the husband level, you only control the container inside, but not the content, unless you rearrange the layout of the ul; my early post may not be of use to you;

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template