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标签的更多相关文章

  1. 用正则表达式抓取网页中的ul 和 li标签中最终的值!

                获取你要抓取的页面 const string URL = "http://www.hn3ddf.gov.cn/price/GetList.html?pageno=1& ...

  2. 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性

    查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...

  3. JQuery中两个ul标签的li互相移动实现方法

    这篇文章主要介绍了JQuery中两个ul标签的li互相移动实现方法,可实现ul标签中li标签内容相互替换的技巧,涉及jQuery操作页面元素的相关技巧,需要的朋友可以参考下 本文实例讲述了JQuery ...

  4. JQuery中两个ul标签的li互相移动

    实例 <html > <head> <meta http-equiv="Content-Type" content="text/html; ...

  5. HTML之body标签中的相关标签

    一 字体标签   字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub& ...

  6. 关于html中的 script标签中的 代码写法有效性? easyui tabs的href不能载入内容页面

    script标签, 即 html中的 js脚本区域中: 它其实就是一个 普通的 html标签, 在 html 渲染器 parser 看来, 它跟其他任何的普通 的 html标签 , 比如 p 标签, ...

  7. HTML中body相关标签-02

    今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...

  8. html5中的容器标签和文本标签

    html5中的容器标签和文本标签 html中的容器级标签和文本级标签,css中的块级元素和行内元素是我们常常拿来比较的四个名词(行内块级暂时先不考虑). 容器标签 容器级的标签可以简单的理解为能嵌套其 ...

  9. HTML_body中常用的标签部分

    meta: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t ...

随机推荐

  1. Lindström–Gessel–Viennot lemma定理 行列式板子

    https://blog.csdn.net/qq_37025443/article/details/86537261 博客 下面是wiki上的讲解,建议耐心地看一遍...虽然看了可能还是不懂 http ...

  2. AcWing 866. 试除法判定质数

    #include <iostream> #include <algorithm> using namespace std; bool is_prime(int x) { ) r ...

  3. 手把手教你做一个python+matplotlib的炫酷的数据可视化动图

    1.效果图 2.注意: 上述资料是虚拟的,为了学习制作动图,构建的. 仅供学习, 不是真实数据,请别误传. 当自己需要对真实数据进行可视化时,可进行适当修改. 3.代码: #第1步:导出模块,固定 i ...

  4. VS2015生成代码图

    熟悉代码调用流程,可以在调试结束前显示代码图,操作位置: 比如开源的caffe_ocr的代码图:

  5. 使用pyaudio播放无损音乐(wav)

    安装pyaudio sudo apt-get install python-pyaudio python3-pyaudio pip3 install pyaudio 执行第二步可能会遇到如下错误: 根 ...

  6. CSS学习(5)更多的选择器

    1.通配符选择器 * 表示选中所有元素 *{color:red;} 2.属性选择器  根据属性名和属性值选中元素 https://developer.mozilla.org/zh-CN/docs/We ...

  7. IDEA 自定义注释模板 支持设置多个param参数

    在使用IDEA过程中,很多人可能感觉自带注释太简约了,想增加一些属性,比如作者.创建时间.版本号等等,这个时候我们可以使用自定义的注释模板来实现我们需求,话不多说直接进入如何自定义模板设置: 打开设置 ...

  8. mybatis用mysql数据库自增主键,插入一条记录返回新增记录的自增主键ID

    今天在敲代码的时候遇到一个问题,就是往数据库里插入一条记录后需要返回这个新增记录的ID(自增主键), 公司框架用的是mybatis的通用Mapper接口,里面的插入方法貌似是不能把新纪录的ID回填到对 ...

  9. STM32F103之I2C学习记录

    26.3.1  模式选择 该外设可以在以下四种模式之一 1)从机发送模式 2)从机接收模式 3)主机发送模式 4)主机接收模式 IIC协议时序 MSB:Most Significant Bit(最高有 ...

  10. Spring Boot框架 - 数据访问 - JDBC&自动配置

    一.新建Spring Boot 工程 特殊勾选数据库相关两个依赖 Mysql Driver — 数据库驱动 Spring Data JDBC 二.配置文件application.properties ...