HTML中的ul标签
2024-09-05 04:52:05
UL格式:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ul是无序列表,每一个li前面有个点。如果想要去掉无序列表的“.”,添加list-style-type=none属性,防止list-style的其他属性失效。eg.list-style-image。
OL格式:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
ol是有序列表,序列号类型由type属性控制,type属性值分别为:1、a、A、I、i。序列号的开始值由属性start控制,start属性值为type所属类型值的范围值。
问题描述:
在使用ul制作下拉菜单时,要给菜单栏(即ul)加上背景色,发现background-color没起作用。查看ul元素盒子大小,发现盒子高度为0。
解决方案: 由于ul没有直接制定高度,其高度根据里面的li来伸缩。由于li设置了向左浮动,因此得清除浮动才能显示背景色。
1. 清除浮动可以给ul添加一个overflow:hidden的样式。
2. 或者在</ul>前面加入一个清除浮动的div,即
<div style="clear: both;"></div>
CSS:
ul{
list-style: none;
background-color: gray;
}
ul li{
float: left;
padding: 0 5px;
border-left: solid 1px black;
}
HTML:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
最新文章
- win10 MySQL启动失败问题
- ProFTPD <;=1.3.5 mod_copy 未授权文件复制漏洞
- linux中diff命令用法
- KALI LINUX WEB 渗透测试视频教程—第十九课-METASPLOIT基础
- 什么是响应式Web设计?怎样进行?
- Spring Boot MyBatis 连接数据库
- HTTPS 加密算法原理机制解析
- wiki oi 3116 高精度练习之加法
- 【PHP实现】高效使用印象笔记之命令行快速保存
- 前端touch事件方向的判断
- 新概念英语(1-113)Small Change
- HTML 动画收藏
- linux解压缩文件名乱码问题 亲测可用
- javascript中使用";<;";符号,比较大小的是字符串或对象时正确的处理方法
- Ubuntu 16.04 安装Go 1.9.2
- 如何解决make: Nothing to be done for `all&#39; 的方法
- 第五周 PSP 燃尽图 以及 进度条总结
- Leetcode-448. Find All Numbers Disappeared in an Array(solve without extra space easy)
- Mac下门罗币矿工样本分析
- HTML5扩展之微数据与丰富网页摘要——张鑫旭
热门文章
- 【笔记】Linux进程间同步和进程绑定至特定cpu
- Plastic Bottle Manufacturer: Characteristic Analysis Of Plastic Packaging Bottles
- django中的session,cookie
- ajax循环展示某段代码
- 吴裕雄 python 人工智能——智能医疗系统后台用户复诊模块简约版代码展示
- IIS-详解IIS中URL重写工具的规则条件(Rule conditions)
- Windows上面搭建FlutterAndroid运行环境
- css实现单行和多行省略号
- MySQL8.0.11安装后,使用CMD无法启动mysql服务
- 添加安卓端的User-Agent