IE下为何不居中?怎么弄都不能居中
代码
<!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" mrc="text/html; charset=gb2312" />
<title>水平导航条(DIV+CSS)</title>
<style type="text/css">
body{
background: #FFF;/*背景属性*/
font-family: Arial, Helvetica, sans-serif;/*字体备用*/
color: #555555;/*颜色*/
padding: 0px;/*内边距:按上右下左排序*/
margin: 5px;/*外边距:按上右下左排序*/
width: 100%;/*宽度*/
/*文本对齐方式:left把文本排列到左边。默认值:由浏览器决定。right把文本排列到右边。center把文本排列到中间。justify实现两端对齐文本效果。inherit规定应该从父元素继承 text-align 属性的值。*/
font-size: 9pt;/*字体大小*/
}
#nav{
font-size: 20px;/*字体的尺寸*/
font-family: Arial, Helvetica, sans-serif;/*字体备用*/
margin:50px auto;/*外边距:按上右下左排序 auto:表示随着浏览器的兼容性来自动调整数值、边距、填充、还有对齐方式等等,不同的浏览器有不同的自动适应效果。
*/
text-align: center;
}
#nav ul{
margin: 0px;/*外边距:按上右下左排序*/
padding: 0px;/*内边距:按上右下左排序*/
list-style-type: none;/*列表格式:无*/
margin:0 auto;
}
#nav li{
float: left;/*决定浮动方向。left元素向左浮动。right元素向右浮动。none默认值。元素不浮动,并会显示在其在文本中出现的位置。
规定应该从父元素继承 float 属性的值。*/
}
#nav li a{
text-decoration: none;/*文本的修饰方法*/
color: #ffffff; /*颜色*/
background: url(1.jpg) no-repeat 0px 0px;/*背景属性*/
width: 150px;/*宽度*/
line-height: 49px;/*高度*/
display: block;/*规定元素应该生成的框的类型*/
}
#nav li a:hover{
color: #ffffff; /*颜色*/
background: url(1.jpg) no-repeat 0px -50px; /*背景属性 no-repeat背景像素*/
}
</style>
</head>
<body>
<div id="nav" margin: 0 auto>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/service/ad.shtml">About us</a></li>
<li><a href="/sort/list_1_1.shtml">Products</a></li>
<li><a href="/sort/list_2_1.shtml">ASP Codes</a></li>
<li><a href="/sort/list_2_1.shtml">PHP Codes</a></li>
<li><a href="/sort/list_11_1.shtml">Ajax Codes</a></li>
<li><a href="/sort/index.shtml">Services</a></li>
</ul></div>
</body>
</html>
[解决办法]
鉴于你这代码粘贴的格式 我就不看了
居中的话
body,div{padding:0px; margin:0px; border:0px;}
.center{width:960px; margin:0px auto;}
<body>
<div class="center">
<!--*******放居中的内容******-->
</div>
</body>
<!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" mrc="text/html; charset=gb2312" />
<title>水平导航条(DIV+CSS)</title>
<style type="text/css">
body{
background: #FFF;/*背景属性*/
font-family: Arial, Helvetica, sans-serif;/*字体备用*/
color: #555555;/*颜色*/
padding: 0px;/*内边距:按上右下左排序*/
margin: 5px;/*外边距:按上右下左排序*/
width: 100%;/*宽度*/
/*文本对齐方式:left把文本排列到左边。默认值:由浏览器决定。right把文本排列到右边。center把文本排列到中间。justify实现两端对齐文本效果。inherit规定应该从父元素继承 text-align 属性的值。*/
font-size: 9pt;/*字体大小*/
}
#nav{
font-size: 20px;/*字体的尺寸*/
font-family: Arial, Helvetica, sans-serif;/*字体备用*/
margin:50px auto;/*外边距:按上右下左排序 auto:表示随着浏览器的兼容性来自动调整数值、边距、填充、还有对齐方式等等,不同的浏览器有不同的自动适应效果。*/
width:1000px;
text-align: center;
}
#nav ul{
margin: 0px;/*外边距:按上右下左排序*/
padding: 0px;/*内边距:按上右下左排序*/
list-style-type: none;/*列表格式:无*/
margin:0 auto;
}
#nav li{
float: left;/*决定浮动方向。left元素向左浮动。right元素向右浮动。none默认值。元素不浮动,并会显示在其在文本中出现的位置。
规定应该从父元素继承 float 属性的值。*/
}
#nav li a{
text-decoration: none;/*文本的修饰方法*/
color: #ffffff; /*颜色*/
background: url(1.jpg) no-repeat 0px 0px;/*背景属性*/
width: 140px;/*宽度*/
line-height: 49px;/*高度*/
display: block;/*规定元素应该生成的框的类型*/
}
#nav li a:hover{
color: #ffffff; /*颜色*/
background: url(1.jpg) no-repeat 0px -50px; /*背景属性 no-repeat背景像素*/
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/service/ad.shtml">About us</a></li>
<li><a href="/sort/list_1_1.shtml">Products</a></li>
<li><a href="/sort/list_2_1.shtml">ASP Codes</a></li>
<li><a href="/sort/list_2_1.shtml">PHP Codes</a></li>
<li><a href="/sort/list_11_1.shtml">Ajax Codes</a></li>
<li><a href="/sort/index.shtml">Services</a></li>
</ul></div>
</body>
</html>