前端导航布局

加粗样式 用float实现ul li标签的横排显示

(作者:吴业华,撰写时间:2019年1月16日)

  1. 下面我们使用float来处理ul li的部分,下面我们来看一个例子,我们用了ul li标签,下面的元素是竖着排列的,截图:

在这里插入图片描述

  1. 在截图中我们看到,在网站中我们看到的是竖着排列的,而在网页部局中呢我们需要它是横着排序的,那么我们应该如何让 它实现横排显示呢
    下方截图为未加float前:

在这里插入图片描述

  1. 实现的方法有许多种 我刚开始打算给li标签一码一个定位的 后来想省点代码 就用float这个方法,因为那是后是刚开始学没多久以为float只能用来浮动div的 然后就试了试

在这里插入图片描述

  1. 通过加上一个左浮动 你看效果如下截图显示:

在这里插入图片描述
标签内容已经横排显示。

猜你喜欢

转载自blog.csdn.net/weixin_44540326/article/details/86503640