display:list-item

最新推荐文章于 2024-06-07 15:15:00 发布

原创最新推荐文章于 2024-06-07 15:15:00 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

2 篇文章

订阅专栏

文章介绍了CSS中列表元素的默认样式，包括li和summary的display属性为list-item，以及li只能存在于ol、ul、menu中。接着讨论了自定义列表，通过设置display为item，调整list-style-position和margin来实现不同的项目符号展示效果。

部署运行你感兴趣的模型镜像

近期在重温css内容，记录一些笔记，证明我有在认真温故，没有敷衍，哈哈哈！

一、默认列表

1、li、summary 默认display:list-item

li的父元素只能是ol、ul、menu

<ul>
    <li>无序列表项目一</li>
    <li>无序列表项目二</li>
    <li>无序列表项目三</li>
</ul>
<ol>
   <li>有序列表项目一</li>
   <li>有序列表项目二</li>
   <li>有序列表项目三</li>
</ol>
<menu>
   <li>菜单一</li>
   <li>菜单二</li>
   <li>菜单三</li>
</menu>
<details>
   <summary>这是一个概要</summary>
   <p>这是一个概要详情内容！</p>
</details>

二、自定义列表

1、声明display:item

2、list-style-position默认值为outside，项目符号显示不出来，将值修改为inside，或者定义margin值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表元素</title>
    <style>
        body{
            font-size:1.5em;
        }
        .defineList{
         /* list-style-type这个属性是可继承的，可以设置在父元素上，如下 */
            list-style-type: square;
        }
        .defineList p{
            display: list-item;
            /* margin-left:40px; */
            list-style-position: inside; 
            /* list-style-type: square; */
        }
    </style>
</head>
<body>
    <div class="defineList">
        <p>自定义列表项目一</p>
        <p>自定义列表项目二</p>
        <p>自定义列表项目三</p>
    </div>
</body>
</html>