前端 position写外面,图标还是显示在列表里面


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul1{list-style-type:disc;
        ul2{list-style-image:url(图片/红毛怪.jpg);}
        .l1{list-style-image:url(浮动演示/xunyicao-001.jpg);}
        .l2{list-style-image:url(浮动演示/xunyicao-006.jpg);}
        .l3{list-style-image:url(浮动演示/xunyicao.jpg);}
        li{border:1px solid red;
            list-style-position:outside ;
        }
    </style>
</head>
<body>
    
    <ul1>
        <li>11</li>
        <li>11</li>
        <li>11</li>
    </ul1>
    <ul2>
        <li>22</li>
        <li>22</li>
        <li>22</li>
    </ul2>
    <ul3>
        <li class="l1">33</li>
        <li class="l2">33</li>
        <li class="l3">33</li>
    </ul3>
</body>
</html>

你的代码有几个问题
1.第10行,结束的地方少了个 }
2.<>标签只有ul 可没有什么ul1,ul2,ul3。所以你需要把这些改成ul,样式里面也是 要不就是.ul1要不就是ul
这俩改好了 就行了

首先有一个问题,你的css丢了半个个大括号

img


     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Document</title>
         <style>
             li {
                 border: 1px solid red;
                 list-style-position: outside;
             }
         </style>
     </head>
     <body>
         <ul>
             <li class="l1">33</li>
             <li class="l2">33</li>
             <li class="l3">33</li>
         </ul>
     </body>
 </html>