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 ...
随机推荐
- drf框架,restful接口规范,源码分析
复习 """ 1.vue如果控制html 在html中设置挂载点.导入vue.js环境.创建Vue对象与挂载点绑定 2.vue是渐进式js框架 3.vue指令 {{ }} ...
- Drawer 侧边栏、以及侧边栏内 容布局
一.Flutter Drawer 侧边栏 在 Scaffold 组件里面传入 drawer 参数可以定义左侧边栏,传入 endDrawer 可以定义右侧边栏.侧边栏默认是隐藏的,我们可以通过手指滑动显 ...
- 动态链接--运行时加载dlopen
前面我们在编译可执行文件时,如果可执行文件要依赖某个so.必须要通过-L指定so路径,并且-l指定so名字. 而且在可执行文件运行时,要先加载so的load部分到进程地址空间. 有一种方式可以在编译时 ...
- python代码在linux终端中执行报错:Unable to init server: Could not connect: Connection refused
python代码在linux终端中执行时报错: Unable to init server: Could not connect: Connection refused Unable to init ...
- CF1067C Knights 构造
题目链接:https://codeforc.es/contest/1067/problem/C 题意:有一个无限大的棋盘,棋盘上初始放置了\(n\)个国际象棋马.如果某一个格子没有放马且能够被\(4\ ...
- iOS 优化ipa包,减小安装包大小
https://www.jianshu.com/p/a49d59b01669 项目打包之后.ipa包的大小是118.9M,上传到App Store后iPhone6s上显示85.5M,下载时间太长,所以 ...
- HDU1276-士兵队列训练问题 (Queue)
题很简单,STL中queue的基本使用. #include <bits/stdc++.h> using namespace std; int N,num; int main() { sca ...
- python换源
pip源的更新 引用自:PyPI使用国内源 # coding: utf-8 import platform import os os_type = platform.system() if " ...
- auto的用法
用法参考链接:https://blog.csdn.net/arrowyl/article/details/80886515 Codeblocks 出现'auto' changes meaning in ...
- C 语言实例 -求分数数列1/2+2/3+3/5+5/8+...的前n项和
程序分析:抓住分子与分母的变化规律:分子a:1,2,3,5,8,13,21,34,55,89,144...分母b:2,3,5,8,13,21,34,55,89,144,233...分母b把数赋给了分子 ...