html中列表前的序号用带圆圈的数字表示及存在的问题

最新推荐文章于 2024-07-01 21:30:19 发布

天道十二

最新推荐文章于 2024-07-01 21:30:19 发布

阅读量1.5w

点赞数 7

分类专栏： html，web前端文章标签： html css 列表序号带圆圈的数字

本文链接：https://blog.csdn.net/qq_38842357/article/details/72794177

版权

html，web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在html中我们会经常遇到列表，列表也是html中一种比较重要存在，的而在日常练习中我们会碰到列表前的序号是经常是带圆圈的数字而不再是单纯的默认格式，这是每个html初学者都会碰到的问题，也是必须要掌握的。其实实现带圆圈的数字并不难，下面我将实现带圆圈的数字。

我将用无序列表做例子，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            list-style-type: none;
        }
        li,span{
            text-align: center;
            width: 25px;
            height: 25px;
            background-color: grey;
            border-radius: 50%;
            font-size: 18px;
            }
    </style>
</head>
<body>
<ul>
    <li><span>1</span></li>
    <li><span>2</span></li>
    <li><span>3</span></li>
    <li><span>4</span></li>
    <li><span>5</span></li>
</ul>
</body>
</html

演示效果：

但是在一道例题中却出现了数字在圆圈外面的现象，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>畅销书排行榜</title>
   <style>
   span{
      text-align: center;
      display:inline-block;
      background-color:purple;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      line-height: 25px;
      font-size: 18px;
      color: black;
      margin-right: 10px;}
   li{list-style-type: none;
      text-indent: 2em;
      background: -webkit-linear-gradient(#F9FBCB, #F8F8F3);
      font-size: 12px;
      line-height: 35px;  }
   a{
      text-decoration: none;
      color:#1A66B3;
        }
   a:hover{text-decoration:underline; }
   </style>
</head>
<body><div>
   <h2>畅销书排行</h2>
   <ul>
      <li><a href="#"><span>1</span>不抱怨的世界</a></li>
      <li><a href="#"><span>2</span>遇见未知的世界</a></li>
      <li><a href="#"><span>3</span>活法</a></li>
      <li><a href="#"><span>4</span>高效能人士的七个习惯</a></li>
      <li><a href="#"><span>5</span>被迫强大</a></li>
      <li><a href="#"><span>6</span>遇见心想事成的自己</a></li>
   </ul></div>
</body>
</html>

演示效果：

无论我怎样调节内边距和外边距还有缩进都无济于事，知道我重新写了一遍代码通过对比我发现问题在于

text-indent: 2em;为了让每一列表项前面有空余我写了这行代码，把这行代码去掉就没事了。效果演示：

因为在文字向右缩进的同时数字也跟着缩进了，所以会出现数字在外面的情况。所以这要求我们要注意这一点，往往一个小细节就可能让我们达不到我们的目的。

天道十二

关注

7
点赞
踩
14

收藏

觉得还不错? 一键收藏
2
评论
html中列表前的序号用带圆圈的数字表示及存在的问题

在html中我们会经常遇到列表，列表也是html中一种比较重要存在，的而在日常练习中我们会碰到列表前的序号是经常是带圆圈的数字而不再是单纯的默认格式，这是每个html初学者都会碰到的问题，也是必须要掌握的。其实实现带圆圈的数字并不难，下面我将实现带圆圈的数字。我将用无序列表做例子，代码如下：html>html lang="en">head> meta charset="UT
复制链接

扫一扫

专栏目录