HTML标签:无序HTML列表<ul></ul>标签

一.ul和li标签示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
         ul {
            border: 1px solid red;
        }
        li {
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <div id="playList">
        <ul>
            <li>视频1</li>
            <li>视频2</li>
            <li>视频3</li>
        </ul>
    </div>
</body>
</html>

二.marging和padding对list-style-type的影响

如果设置了

* {

margin:0;

padding: 0;

}

,那么列表样式会消失。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        ul {
            border: 1px solid red;
            list-style-type: none;
            padding:0;
        }
        li {
            border: 1px solid green;
            display: inline;
        }
    </style>
</head>
<body>
    <div id="playList">
        <ul>
            <li>视频1</li>
            <li>视频2</li>
            <li>视频3</li>
        </ul>
    </div>
</body>
</html>

三.取消列表标志

指定列表标志的是CSS的list-style-type属性,所以要取消列表标志只需要设置ul或者li标签的list-style-type属性的值为none即可。虽然取消掉了,但是空白间隔依然存在。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        ul {
            border: 1px solid red;
            list-style-type: none;
        }
        li {
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <div id="playList">
        <ul>
            <li>视频1</li>
            <li>视频2</li>
            <li>视频3</li>
        </ul>
    </div>
</body>
</html>

如果要空白间隔,可以设置ul的padding值为0。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        ul {
            border: 1px solid red;
            list-style-type: none;
            padding: 0;
        }
        li {
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <div id="playList">
        <ul>
            <li>视频1</li>
            <li>视频2</li>
            <li>视频3</li>
        </ul>
    </div>
</body>
</html>

三.css布局:水平导航栏

1.方式一:display:inline

通过设置将块级元素li设置为内联元素实现。

inline:将元素显示为内联元素(如<span>)。任何高度和宽度属性都不会有影响

2.方式二:float:left

通过设置css的float属性实现,设置float会消除margin,被设置的元素之间不再有间隔。

float:

float属性指定元素应如何浮动。

注意:绝对定位的元素会忽略该float属性!

注意:浮动元素后面的元素将围绕它流动。要避免这种情况,请使用 clear属性或clearfix hack

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        ul {
            border: 1px solid red;
            list-style-type: none;
            padding: 0;
        }
        li {
            border: 1px solid green;
            float:left;
        }
    </style>
</head>
<body>
    <div id="playList">
        <ul>
            <li>视频1</li>
            <li>视频2</li>
            <li>视频3</li>
        </ul>
    </div>
</body>
</html>

如上图所示,float属性会导致li标签浮动到ul标签之外。因为当一个元素只包含浮动元素的时候,它会出现高度折叠,即元素的上下底边重合,和高度为0效果一样,可以通过设置ul标签的overflow属性值为hidden, 防止li元素出现在列表ul之外。

overflow属性指定了当内容溢出元素框时应发生的情况。

此属性指定当元素的内容太大而无法放入指定区域时是截断内容还是添加滚动条。

注意:overflow属性仅适用于具有指定高度的块元素。

hidden:溢出部分被截断,其余内容将不可见。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        ul {
            border: 1px solid red;
            list-style-type: none;
            padding: 0;
            overflow: hidden;
        }
        li {
            border: 1px solid green;
            float:left;
        }
    </style>
</head>
<body>
    <div id="playList">
        <ul>
            <li>视频1</li>
            <li>视频2</li>
            <li>视频3</li>
        </ul>
    </div>
</body>
</html>

完整示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #playList {
            width: 100%;
        }
        ul {
            /* border: 1px solid red; */
            list-style-type: none;
            padding: 0;
            overflow: hidden;
            background-color: aquamarine;
        }
        li {
            /* border: 1px solid green; */
            float:left;
            width: 300px;
        }
        li:last-child{
            float: none;
            width: auto;
        }
        a {
            display: block;
            font-weight:bold;
            font-size: 20px;
            color:#FFFFFF;
            background-color:#bebebe;
            text-align:center;
            padding:4px;
            text-decoration:none;
        }
        a:hover {
            background-color:#cc0000;
        }
    </style>
</head>
<body>
    <div id="playList">
        <ul>
            <li><a href="#">视频1</a></li>
            <li><a href="#">视频2</a></li>
            <li><a href="#">视频3</a></li>
        </ul>
    </div>
</body>
</html>

参考资料

[1]w3school, css列表:http://www.w3school.com.cn/css/css_list.asp

[2]w3schools.com, css Lists:https://www.w3schools.com/css/css_list.asp

[3]w3schools.com,CSS display Property: https://www.w3schools.com/cssref/pr_class_display.asp

[4]w3schools.com,CSS float Property: https://www.w3schools.com/cssref/pr_class_float.asp

[5]w3schools.com,CSS  overflow Property: https://www.w3schools.com/cssref/pr_pos_overflow.asp

[6]css2.2标准草案display属性:https://www.w3.org/TR/CSS22/visuren.html#display-prop

原文地址:https://www.cnblogs.com/sweeneys/p/10352329.html

时间: 2024-10-06 06:38:17

HTML标签:无序HTML列表<ul></ul>标签的相关文章

列表标签-无序列表

无序列表: <ul> <li>列表项</li> <li>列表项</li> ...... </ul> type属性值: disc 圆点 square 正方形 circle 空心圆 原文地址:https://www.cnblogs.com/hugegege/p/9438903.html

HTML列表(组标签)+div(布局标签)与span

一.列表 HTML中常见的列表有三种,分别是: 1.无序列表,是一组描述列表语义的组标签,列表中每个项之间没有先后顺序:如图: 1)组标签:组标签就是由多个标签组成的一个整体,它们之间共同存在:例如 :ul标签,ol标签,dl标签: 2)ul : 是英文 unordered list "无序列表"的意思: 3)li : 是英文 list item "列表项"的意思: 4)ul标签 里边只能存放 li标签,li标签也不能单独存在,但li标签是容器级标签,里边可以放任何

HTML 列表 &lt;ol&gt;&lt;ul&gt;&lt;li&gt;&lt;dl&gt;&lt;dt&gt;&lt;dd&gt;

<ol>标签-有序列表 定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,ol 元素的 "compact"."start" 以及 "type" 属性是不被赞成使用的. 在 XHTML 1.0 Strict DTD 中,ol 元素的 "compact"."start" 以及 "type" 属性是不被支持的.

列表框、分组列表框、标签(label)、分组框(fieldset)、框架(frameset)

列表框(select) 下拉列表,用户可以从一些可选项中选择. 示例:简单的下拉列表 <select name="country"> <option value="America">美国</option> <option value="China" selected="selected">中国</option> <option value="India

标签定义选项列表

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <label for="search">搜索引擎</label> <input type="url" name="search" id="search" list="searchlis

关于css中列表(ul ol)存在默认间距的问题

一.总结: 有时候我们要给列表(ul ol 本身就是属于块级元素)的上表框或下边框设置颜色,如下: 但是在给内联块级元素(inline-block)的上表框或下边框设置颜色的时候,就没有这么简单: 在前辈的博客中了解到:ul或ol中的li与li之间之所以会有间隙,是因为空白符引起的. 因为我们一般都是一行一个li,换行都会产生空白符.上面的日历也可以看到每个数之间有明显的间隙. 解决办法:将ul或ol的font-size设置为0,消去空白间隙,重新在给li定义字体的大小. 修改后的效果: 需要注

采用em标签制作的列表三角形标号

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

这阵子开始入门学习html标签。下面是本人对标签的笔记分享给平台里面的大神们。需要各位大神补充还有那些常用标签。请留意指教 感激不尽

<p> </p> 段落标签 <h#> </h#>(1-6) 比trong更有重要性 标题标签 <title> </title> <strong> </strong> 强调标签 <b> </b> 加粗标签 </br> 特殊换行,没有开头 <img/>图片标签 列子: <img src=" "/> <a> </a>

前端技术:HTML---Head标签中包含的头文件标签,body标签包含的内部标签

1.Head标签中包含的 头文件标签的作用: (1)title标签:定义网页的标题. (2)meta标签:一般用于定义页面的特殊信息,例如页面的关键字.页面描述等 (3)link标签:用于引入外部样式文件(CSS 文件). (4)style标签:用于定义元素的CSS样式. (5)script标签:用于定义页面的JavaScript代码,或者引入外部JavaScript文件. meta标签包含的属性 (1)charset属性:字符集编码方式: ASCII:数字.英文字母.字符进行编码 GB2312

&lt;p&gt;&lt;/p&gt;标签为什么不能包含块级标签?还有哪些特殊标签?

最近,在码代码的时候,就是下面的这段代码,我犯了一个很不起眼,但犯了就致命的BUG. <body> <p> <ol> <li>Hello</li> </ol> </p> <div>How are you?</div> </body> <script src="jquery-3.1.1.js"></script> <script> v