1.利用浮动完成布局
以小米导航栏为例
<style>* {padding: 0;margin: 0;/* 通配符全选，取消内外边距的小缝隙 // 不建议使用通配符 */}header {width: 100%;background-color: #333333;/* 设置背景 */}div {width: 1226px;height: 40px;margin: auto;/* 设置靶心居中 */color: rgb(164, 163, 163);/* 字体颜色 */line-height: 40px;/* 字体居中 */font-size: 12px;/* 字体大小 */}ul {list-style: none;/* 取消列表的点 */}.left>li {float: left;/* 利用浮动，完成元素类型转换，使他们横向排列 */}.left> span {float: left;font-size: 12px;color: #4b4a46;margin: auto 5px;/* 设置左边 中间的小线，用左右外边距隔开 */}.right>li {float: right;}.right>span{float: right;font-size: 12px;color: #4b4a46;margin: auto 5px;/* 设置 右面中间的小线，用左右外边距隔开 */}.right>li:nth-child(1){width: 120px;text-align: center;}</style>
</head><body><header><div><ul class="left"><li>小米官网</li><span>|</span><li>小米商城</li><span>|</span><li>MIUI</li><span>|</span><li>lot</li><span>|</span><li>云服务</li><span>|</span><li>天星数科</li><span>|</span><li>有品</li><span>|</span><li>小爱开发平台</li><span>|</span><li>企业团购</li><span>|</span><li>资质证照</li><span>|</span><li>协议规则</li><span>|</span><li>下载app</li><span>|</span><li>Select location</li></ul><ul class="right"><li>🛒购物车(0)</li><li>消息通知</li><span>|</span><li>注册</li><span>|</span><li>登录</li></ul></div></header>
</body>2.利用弹性盒子布局
大体无改变，浮动换成弹性盒子
<style>* {padding: 0;margin: 0;/* 通配符全选，取消内外边距的小缝隙 // 不建议使用通配符 */}header {width: 100%;background-color: #333333;/* 设置背景 */}div {width: 1226px;height: 40px;margin: auto;/* 设置靶心居中 */color: rgb(164, 163, 163);/* 字体颜色 */line-height: 40px;/* 字体居中 */font-size: 12px;/* 字体大小 */display: flex;justify-content: space-between;/* 子元素两端对齐 */}ul {list-style: none;/* 取消列表的点 */}.left {display: flex;/* 父元素设置弹性盒子，控制子元素布局 */}.left> span {font-size: 12px;color: #4b4a46;margin: auto 5px;/* 设置左边 中间的小线，用左右外边距隔开 */}.right{display: flex;}.right>span{float: right;font-size: 12px;color: #4b4a46;margin: auto 5px;/* 设置 右面中间的小线，用左右外边距隔开 */}.right>li:nth-child(1){width: 120px;text-align: center;}</style>
</head><body><header><div><ul class="left"><li>小米官网</li><span>|</span><li>小米商城</li><span>|</span><li>MIUI</li><span>|</span><li>lot</li><span>|</span><li>云服务</li><span>|</span><li>天星数科</li><span>|</span><li>有品</li><span>|</span><li>小爱开发平台</li><span>|</span><li>企业团购</li><span>|</span><li>资质证照</li><span>|</span><li>协议规则</li><span>|</span><li>下载app</li><span>|</span><li>Select location</li></ul><ul class="right"><li>🛒购物车(0)</li><li>消息通知</li><span>|</span><li>注册</li><span>|</span><li>登录</li></ul></div></header>
</body>效果
