【右浮动时标签倒转排列——以导航栏为例解决此问题】

最新推荐文章于 2022-09-29 20:24:45 发布

原创最新推荐文章于 2022-09-29 20:24:45 发布 · 526 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #html5

本文介绍了如何使用HTML和CSS来创建一个浮动导航栏。通过设置图片浮动左，列表项浮动右，实现了导航栏的布局。通过调整样式，可以进一步定制导航栏的视觉效果。

1、首先，在html中做好布局：
在这里插入图片描述
谷歌中显示如下：

2、设置一下基本样式
在这里插入图片描述
谷歌显示如下：

3、重点来了：
我们是要让图片左浮动，列表项右浮动。
需要先给图片所在的div（即.img）：float：left；
再给ul列表 (即.list)（作为li的父元素）：float：right；
最后我们给ul中的每一项子元素li (即.list>li)：float;left;
在这里插入图片描述
可以得到：

4、稍调下样式，就可以得到我们想要的导航栏了！