为什么第一个li会在nav中居中了？
慕粉3397266
2016-08-16 00:06
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="css/main.css">
<script src="js/setHome.js"></script>
<style>
*{
margin:0;
padding:0;
font-size:12px;
font-family:"微软雅黑";
}
body{
background-color:#f5f5f5;
}
a{
text-decoration:none;
}
.top{
background:url(../images/top_bg.jpg) repeat-x;
height:27px;
width:100%;
}
.public-center{
width:1000px;
margin:0 auto;
}
.top nav li{
float:right;
font:"微软雅黑";
width:70px;
line-height:27px;
color:#8e8e8e;
}
.top nav li a:link,.top nav li a:visited{
color:#8e8e8e;
}
.top nav li a:hover,.top nav li a:active{
color:#F00;
}
.logo{
background-color:#FFF;
height:80px;
}
.logo-left{
width:200px;
float:left;
}
.logo-tel{
float:right;
height:28px;
width:270px;
margin-top:30px;
color:#8e8e8e;
}
.logo-tel img{
vertical-align:middle;
margin-right:10px;
}
.tel-num{
font-size:16px;
color:#F00;
font-weight:bold;
}
.nav{
background-color:#786f66;
height:40px;
border-radius:5px;
}
.nav-left{
float:left;
}
.nav-left ul{
list-style:none;
}
.nav-left li{
height:40px;
float:left;
}
.nav-left a{
color:#FFF;
width:100px;
font-size:16px;
width:80px;
line-height:40px;
margin-right:50px;
}
</style>
</head>
<body>
<header>
<div class="top">
<div class="public-center">
<nav>
<ul>
<li class="top-nav-item"><a href="#" onclick="SetHome(window.location);">设为首页</a></li>
<li class="top-nav-item"><a href="#" onclick="AddFavorite(window.location, document.title)">收藏本站</a></li>
<li class="top-nav-item"><a href="#">联系我们</a></li>
</ul>
</nav>
</div>
</div><!--top结束-->
<div class="public-center">
<div class="logo">
<div class="logo-left"><img alt="慕课网" src="images/logo.jpg"></div>
<div class="logo-tel">
<img alt="tel" src="images/tel.jpg">24小时服务热线:<span class="tel-num"> 123-456-7890</span>
</div>
</div>
</div><!--logo结束-->
<nav class="nav public-center">
<div class="nav-left">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于慕课</a></li>
<li><a href="#">新闻动态</a></li>
<li><a href="#">课程中心</a></li>
<li><a href="#">在线课程</a></li>
<li><a href="#">人才招聘</a></li>
</ul>
</div><!--导航栏结束-->
<div class="nav-right">
<form method="post" action="#">
<input type="text"/>
</form>
</div><!--搜索栏结束-->
</nav><!--nav结束-->
</header>
</body>
</html>
2回答
-
- m慕光
- 2016-08-16 08:06:20
子元素继承父元素属性
.public-center{ width = 1000px; margin = 0 auto; } -
- 孙斌_bin
- 2016-08-24 22:03:37
继承，子元素继承父元素
企业网站综合布局实战
157042 学习 · 1984 问题
相似问题