Newbie, haven't started yet, please give me some advice_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:00:38

Original

1121 people have browsed it

这个怎么实现居中

无标题文档

#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

<!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>

Copy after login

这是你原来基础上做的扩展，这种方式只是救急，如果页面元素过多就会引发其它问题。所以我建议用下面的方式居中。
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>

Copy after login

常用居中margin:0 auto;

Related labels：

getting Started newbie

source：php.cn

Previous article：css selector (study notes)_html/css_WEB-ITnose Next article：Hya.io ? Web-based digital audio workstation_html/css_WEB-ITnose

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