Home > Article > Web Front-end > Newbie, haven't started yet, please give me some advice_html/css_WEB-ITnose
Newbie, haven't started yet, please give me some advice_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:00:381118browse
这个怎么实现居中
2c1c01fe3da5b45638b932defb4b63fc
acf251eef30dadcd95fda0b63932cc24
93f0f5c25f18dab9d176bd4f6de5d30e
efd2567c1fb77e16e60d87a2c199ee8e
b2386ffb911b14667cb8f0f91ea547a7无标题文档6e916e0f7d1e588d4f442bf645aedb2f
ef0d2420b1e5291570a81009eee48a1a
#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;}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
a01a7f75cc381cb172894b4cf631c40d
7c356abc9db22b8e97544e5d6e8b3483
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6fd36ec1cd3c8998a739fe1945b154f79电子配件5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6fd36ec1cd3c8998a739fe1945b154f79电脑整机5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6fd36ec1cd3c8998a739fe1945b154f79需要订购5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6fd36ec1cd3c8998a739fe1945b154f79联系我们5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
回复讨论(解决方案)
float元素不处理是不能居中的，需要特别的处理：
demo here
<!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>无标题文档</title> <style type="text/css"> #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} </style></head><body><div id="most"> <div id="main"> <ul> <li><a href="#">电子配件</a></li> <li><a href="#">电脑整机</a></li> <li><a href="#">需要订购</a></li> <li><a href="#">联系我们</a></li> </ul> </div></div></body></html> 这是你原来基础上做的扩展，这种方式只是救急，如果页面元素过多就会引发其它问题。所以我建议用下面的方式居中。
margin:0 auto; 这是大部分网站采取居中的一种办法，高效，安全，稳定，有力。
然后float之后的元素会影响其它兄弟元素，所以要clearfix。
demo here.
<!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>无标题文档</title> <style type="text/css"> #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;} </style></head><body><div id="most"> <div id="main"> <ul class="clearfix"> <li><a href="#">电子配件</a></li> <li><a href="#">电脑整机</a></li> <li><a href="#">需要订购</a></li> <li><a href="#">联系我们</a></li> </ul> </div></div></body></html> 常用居中margin:0 auto;