CSS实现导航条-马育民老师

# 案例

实现 网站顶部导航条 时，需要将里面的 div设置为 **内联块状元素**，否则 margin属性 会影响外部 div

[![](https://www.malaoshi.top/upload/pic/html/QQ20210607092650.png)](https://www.malaoshi.top/upload/pic/html/QQ20210607092650.png)

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

原文出处：/show_1IX1Ge5X6ZpD.html