HTML中的ul标签
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>
HTML中的ul标签的更多相关文章
- 用正则表达式抓取网页中的ul 和 li标签中最终的值!
获取你要抓取的页面 const string URL = "http://www.hn3ddf.gov.cn/price/GetList.html?pageno=1& ...
- 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...
- JQuery中两个ul标签的li互相移动实现方法
这篇文章主要介绍了JQuery中两个ul标签的li互相移动实现方法,可实现ul标签中li标签内容相互替换的技巧,涉及jQuery操作页面元素的相关技巧,需要的朋友可以参考下 本文实例讲述了JQuery ...
- JQuery中两个ul标签的li互相移动
实例 <html > <head> <meta http-equiv="Content-Type" content="text/html; ...
- HTML之body标签中的相关标签
一 字体标签 字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub& ...
- 关于html中的 script标签中的 代码写法有效性? easyui tabs的href不能载入内容页面
script标签, 即 html中的 js脚本区域中: 它其实就是一个 普通的 html标签, 在 html 渲染器 parser 看来, 它跟其他任何的普通 的 html标签 , 比如 p 标签, ...
- HTML中body相关标签-02
今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- html5中的容器标签和文本标签
html5中的容器标签和文本标签 html中的容器级标签和文本级标签,css中的块级元素和行内元素是我们常常拿来比较的四个名词(行内块级暂时先不考虑). 容器标签 容器级的标签可以简单的理解为能嵌套其 ...
- HTML_body中常用的标签部分
meta: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t ...
随机推荐
- Type Java类型
参考:https://blog.csdn.net/a327369238/article/details/52621043 Type —— Java类型 Type是一个空接口,所有类型的公共接口(父接口 ...
- 项目中vuex的加入
1, 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 为了解决以上问题,Vuex 允许我们将 store 分割成模块(modu ...
- UVA 12124 Assemble(二分答案)
题目链接:https://vjudge.net/problem/UVA-12124 垃圾vjudge毁我青春!! 首先这道题是解决“最小值最大”的问题,所以要二分答案. 在这里我们二分$quality ...
- Springmvc-crud-02错误(添加出现中文乱码)
错误: 在进行添加页面时使用post请求,输入中文时会出现乱码 原因: post请求不支持gbk格式,使用字符编码过滤器,设置为UTF-8编码即可 注意配置请求的字符集和响应字符集 解决方案:需要放在 ...
- 6_7 树的层次遍历(UVa122)<二叉树的动态创建与BFS>
树状结构在计算机科学的许多领域中都相当重要.本问题牵涉到建立树及走访树.给你一二叉树,你的任务是写一个程序来打印依「阶层(level-order)」走访的结果.在本问题中,二叉树的每个节点含有一个正整 ...
- oracle增加字段,循环
alter table PARAMETETER_CONFIGURATION add (INPUT_IS VARCHAR2(20) ): declare sum_i int:=0; --定义整型变量,存 ...
- [Bug合集] java.lang.IllegalStateException: Could not find method onClickcrea(View) in a parent
出现场景: 在一个Button中定义了onclick属性,值为startChat. 在Activity中定义一个方法. public void startChat(View view){} 运行时,点 ...
- Nexus:hardware type changed to No-Transceiver
如下是相关的案例: 1.N5K & Cat3750 较新版本的NX-OS在N5K上支持1G或10G,但N5K不支持auto-speed sensing 如下是故障信息的体现:3750和N5K之 ...
- ZooKeeper-集群模式配置
(1)下载安装zookeeper,进行基本的配置,详细教程:https://www.cnblogs.com/excellencesy/p/11956485.html (2)在三台虚拟机上分别按照以上方 ...
- ES-moreLikeThisQueryBuilder-文章推荐
//获取推荐文章 public Object getRecommendList2(String name) { NativeSearchQueryBuilder queryBuilder = new ...