这个怎么实现居中
nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
#most {
width:780px;
height:30px;
background:url(20120416013038848.jpg);
float:left;
}
#most ul {
padding:0px;
list-style:none;
float:left;
width:8000px;
margin:0px auto;
}
#most li{
float:left;
}
#main {
float:left;
}
#most a{
display:block;
width:119px;
height:30px;
color: #FFF;
text-align:center;
line-height:29px;
text-decoration:none;
font-size:14px;
font-weight:bold;
}
#most a:hover{
background-color:#FFF;
color:#333;}
电子配件
电子配件
电子配件
电子配件
回复讨论(解决方案)
float元素不处理是不能居中的,需要特别的处理:
demo here
- nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
无标题文档 #most{width:780px;height:30px;background:#f0f0f0;float:left;border:1px solid #ccc; position:relative; left:50%; margin-left:-390px;} #most ul{padding:0px;list-style:none;float:left;width:8000px;margin:0px auto} #most li{float:left} #main{float:left} #most a{display:block;width:119px;height:30px;color:#333;text-align:center;line-height:29px;text-decoration:none;font-size:14px;font-weight:bold} #most a:hover{background-color:#FFF;color:#333}
登录后复制
这是你原来基础上做的扩展,这种方式只是救急,如果页面元素过多就会引发其它问题。所以我建议用下面的方式居中。
margin:0 auto; 这是大部分网站采取居中的一种办法,高效,安全,稳定,有力。
然后float之后的元素会影响其它兄弟元素,所以要clearfix。
demo here.
- nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
无标题文档 #most{width:780px;height:30px;background:#f0f0f0;margin: 0 auto;border:1px solid #ccc;} #most ul{padding:0px;list-style:none;float:left;width:8000px;margin:0px auto} #most li{float:left} /*#main{float:left}*/ #most a{display:block;width:119px;height:30px;color:#333;text-align:center;line-height:29px;text-decoration:none;font-size:14px;font-weight:bold} #most a:hover{background-color:#FFF;color:#333} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} .clearfix{display:block;}
登录后复制
常用居中margin:0 auto;