案例
实现 网站顶部导航条 时,需要将里面的 div设置为 内联块状元素,否则 margin属性 会影响外部 div
https://www.ctrip.com/?sid=155952&allianceid=4897&ouid=index
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
color: #666;
background: #F4F4F4;
font-size: 12px;
font-family: "microsoft yahei";
height: 36px;
}
.nav-cnt{
width: 1180px;
margin: 0 auto;
height: 36px;
}
.slogan{
float: left;
margin: 11px 0 0 14px;
}
.nav-right{
float: right;
list-style: none;
margin: 11px 0 0 0;
}
.nav-item{
float: left;
padding: 0 16px;
border-right: 1px solid #DDDDDD;
height: 12px;
line-height: 12px;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-cnt">
<div class="slogan">
让旅游更幸福
</div>
<ul class="nav-right">
<li class="nav-item">您好,请登录</li>
<li class="nav-item">免费注册</li>
<li class="nav-item">消息</li>
</ul>
</div>
</div>
</body>
</html>
