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

在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>

演示效果：

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

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

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

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

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

相关推荐