CSS 横向导航栏(由竖向改成横向 float)

 

float元素默认会收缩

div块级元素,默认从上往下流

如何让导航栏有竖排→横排

每一块加上 float:left;

注意事项:以防出bug,在加了float块的父级,加上伪类:clearfix,具体写法如下:

.clearfix::after{content: '';display: block;clear: both;
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/569474.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

float:left后,导航栏不左浮解决

float:left 导航栏左浮,但加入 width:50%后,本想达到下面效果: 但是,所有元素成一列,不左浮了 原因:可能是你加了边框,边框占像素,所以相当于把剩余的50%“挤下来了” …

单词统计

题目: 第0步:输出某个英文文本文件中 26 字母出现的频率,由高到低排列,并显示字母出现的百分比,精确到小数点后面两位。 第1步:输出单个文件中的前 N 个最常出现的英语单词。作用:一个用于统计文…

轻松自动化---selenium-webdriver(python) (四)

https://www.cnblogs.com/fnng/p/3190966.html http://www.testclass.net/ 测试教程网,专业的selenium 学习网站。 本节要解决的问题: 如何定位一组元素? 场景 从上一节的例子中可以看出,webdriver可以很方便的使用findElement方…

如何用CSS画一个三角形

border-left-color: border-top-width:中心距顶部距离 .userCard .welcome .triangle{ border: 8px solid transparent;width: 0px;height: 0px;border-left-color: #E8676B;border-top-width: 0; } 结果 → 这篇博客很清楚,可借助参考:https://…

CSS hr修改样式

hr 默认样式 若加上这样CSS hr{height: 0;border: none;border-top: 1px solid red; } 会变为

scrapy框架的日志等级和请求传参

Scrapy的日志等级 - 在使用scrapy crawl spiderFileName运行程序时,在终端里打印输出的就是scrapy的日志信息。- 日志信息的种类:ERROR : 一般错误WARNING : 警告INFO : 一般的信息DEBUG : 调试信息- 设置日志信息指定输出&#x…

12-order by和group by 原理和优化 sort by 倒叙

原理和优化 groupBy分组?会造成一个数据倾斜 1.解决方案:将输入在map端进行部分的打乱重分 set hive.groupby.skewindatatrue; 2.在map到reduce端的时候设置combiner进行合并 set hive.map.aggrtrue; 3.在combiner进行合并的时候要知道数据量的大小&…

DOM相关(主要是var和let的区别用法)

一、1.节点的类型有七种,分别是:Document,DocumentType,Element,Attribute,Text,Comment,DocumentFragment 2.DOM树的根节点是:html 3.元素Element的NodeType值为&…

JOIN三个表格

表格一 表格二 表格三 SQL语句为 SELECT * FROM movie JOIN casting ON movie.idcasting.movieid     JOIN actor ON casting.actoridactor.id(要注意join 的格式) 最终结果展示在最下面 idtitleyrdirectorbudgetgrossmovieidactoridordidname1001710 Rillington Place19…

深度学习入门|第5章 误差反向传播法(二)

误差反向传播法 前言 此为本人学习《深度学习入门》的学习笔记 四、简单层的实现 本节将用 Python 实现前面的购买苹果的例子。这里,我们把要实现的计算图的乘法节点称为“乘法层”(MulLayer),加法节点称为“加法层”(…

牡丹-曹州牡丹:曹州牡丹

ylbtech-牡丹-曹州牡丹:曹州牡丹菏泽牡丹,山东省菏泽市特产,中国国家地理标志产品。牡丹,原产中国西北部,秦岭和陕北山地多野生,栽培历史悠久,南北朝时已声成为观赏植物。菏泽,古称曹…

idea报错:Error: java: 错误: 不支持发行版本 5

我在测试类运行时,出现下述错误: 可能原因:java版本不一致项目编译配置使用的java版本不对 解决方案: 第一步:file---Project Structure-- Project(两版本改为一致:第二、三个横框中数字都为11…

python网络爬虫基础day01

2019.5.13,今天在“小猿圈”跟着波波老师学习了爬虫开发的第一章和第二章,总结下今天学的知识: 爬虫基础介绍:   什么是爬虫?    - 通过编写程序,模拟浏览器上网,然后让其去互联网上抓取数…

忘记mysql数据库连接密码

本次操作所有需要用到的密令行: bin>net stop mysql bin>mysqld --skip-grant-tables bin>mysql mysql>use mysql mysql>update user set passwordpassword("123456") where user"root"; mysql>flush privileges; mys…

Python 基础 函数

1:调用函数 eg:调用内置函数 abs() 求绝对值 2:定义函数 1:定义一个函数要使用 def 语句,依次写出函数名、括号、括号中的参数和冒号:,然后,在缩进块中编写函数体,函数的返回值用ret…

Springmvc跨服务器文件上传报403,409错误

报403错误 Tomcat默认只读模式&#xff0c;传图片会被拒绝 解决&#xff1a;找到 Tomcat 目录---conf下---web.xml&#xff0c;打开 加入 <init-param><param-name>readonly</param-name><param-value>false</param-value> </init-param&g…

单元测试——Winfrom

一、新建单元测试项目 二、单元测试可在Service或者Repository层分别创建 三、编写好代码后可运行单元测试 转载于:https://www.cnblogs.com/772933011qq/p/10863817.html

vue报错:dependencies were not found: * element-ui in ./src/main.js * element-ui/lib/theme-chalk/inde

报错信息 These dependencies were not found: * element-ui in ./src/main.js * element-ui/lib/theme-chalk/index.css in ./src/main.js 解决方案 1、 cmd进入命令行窗口&#xff0c;切入运行的项目文件夹下 2、输入 cnpm i element-ui -S(没有装淘宝镜像的使用 npm i…

Spring的配置与使用

一、Spring的组成 其中最核心的是Core Container核心容器 二、spring框架的作用&#xff1a; 对于我目前了解的spring框架&#xff0c;其中一个作用是用来降低程序间的耦合度的&#xff0c;也就是降低程序间的依耐性。 IOC&#xff1a;inversion of control 控制反转-->即将…

新增或编辑保存时出错后,页面无法再次编辑

新增或编辑保存时出错后&#xff0c;页面无法再次编辑&#xff0c;除非关闭新增或编辑弹窗&#xff0c;重新打开新增或编辑页面&#xff0c;否则无法编辑 &#xff0c;如下图&#xff1a; 解决方案 在新增方法之前定义loading参数&#xff0c;在调用后台服务之前先使用loading…