Home  >  Q&A  >  body text

Help me check the settings of ul and li

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> ;Document</title>
<style>
ul{
          /*Default small dots*/
list-style-type: disc;
/*Hollow small dots* /
list-style-type: circle;
/*Solid small square*/
list-style-type:square;
/*Number sequence number, turned into an ordered list*/
list-style-type: decimal;
/*Add 0 in front of the serial number: Example: 01, 02, 03*/
list-style-type: decimal-leading-zero;
/*Use pictures Instead of the origin, the size must be very small and difficult to use. Instead, directly control the li tag */
        /*list-style-image: url(1.jpg);*/
}
              /*Auto Define list items*/
li{
/*Cancel dots*/
list-style-type: none;
/*Reserve image position*/
padding-left: 2em;
/*Upload images*/
list-style-image: url(1.jpg);
/*The image list items are not repeated*/
background-repeat: no-repeat;
/*Image size*/
background-size: 1em 1em;
/*Image position setting, align with the text top grid, xy axis visual inspection*/
background-position: 0 4px;
}
</style>
</head>
<body>
<h3>Front-end development tools</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>javaScript</li>
;li>Bootstrap</li>
</ul>
</body>
</html>


Results shown The image referenced by the list item is still displayed very large and is not reduced to 1em size. Why is this?

益伦益伦2522 days ago1170

reply all(1)I'll reply

  • chobits4

    chobits42017-12-11 09:02:48

    It is recommended to use the following two methods to solve the problem: 1. Change the size of your source image. 2. Use li:before to set

    li{
       list-style: none;
    }
    li:before{
       content: '';
       display: inline-block;
       height: y;
       width: x;
       background-image: url();
    }


    reply
    2
  • Cancelreply