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. Jmeter学习之-聚合报告详解

    在对接口进行性能测试时,经常用到jmeter的聚合报告来分析数据 首先在待测试的接口或线程组下添加“监听器>聚合报告” 执行请求后,将生成聚合报告,聚合报告包括以下结果参数(中文版+英文版) A ...

  2. PostGreSql - 提取jsonb数据

    本文主要介绍如何在PostGreSql中提取出jsonb类型字段中的某个key的值 参考:https://www.cnblogs.com/mywebnumber/p/5551092.html 一.简单 ...

  3. 1012 The Best Rank

    1012 The Best Rank 1. 注意点 一名同学同样排名下的科目优先级问题 不同同学分数相同时排名相同,注意 排名不是 1 1 2 3 4 这种, 而是 1 1 3 4 5 注意到有些同学 ...

  4. angular 输入框自动绑定值最长为16位,超过16位则会报错

    最近发现angular在使用input输入框的ng-model绑定scope变量的时候,发现,输入长串的数字将会出错.代码如下: <html> <head> <meta ...

  5. 解决wps for linux缺失windows字体

    操作步骤 1.下载缺失字体 链接: https://pan.baidu.com/s/1ZUbtQ96b8RVbH0LrXb_GlQ  密码: nsr4 2.解压字体 unzip wps-font-sy ...

  6. 504,什么是FOUC?怎么避免

    Flash of Unstyled Content :用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再重新显示文档,造成页面闪烁 解决办法:把样式表放到文档的<head& ...

  7. Linux - curl 基本使用

    1. 概述 我接触过的很多服务端调试, 接口测试, 最终都落到了这个地方 简答介绍 curl 的使用 尽量循序渐进, 因为我也不太熟悉 大概会提到的命令 curl curl -v curl -s cu ...

  8. 删除数据高级用法:delete,truncate

    1.语法: delete 允许使用条件(删除符合条件的数据) 允许使用limit,限制删除的记录数.limit N     常见的是,limit配合order by来使用:先将结果排序,再删除固定数量 ...

  9. 安装rpm包时提示错误:依赖检测失败的解决方法

    安装rpm包时提示错误:依赖检测失败 解决方法: 命令末尾加上--nodeps --force

  10. Linux01——常用命令

    帮助命令: man 一行一行显示 ,按下enter键就向下显示一行,按q退出 --help 全部显示 日期类:date ,cal 显示当前目录:pwd 切换目录:cd(***重点***) cd .. ...