HTML仿一个京东左侧菜单栏(只简单实现界面)

HTML插入背景图片在没有no-repeat的情况下是平铺整个容器，在有no-repeat的情况下是不平铺，我的图片是每一行右侧的小箭头

我的问题是在我的网页上为什么每一行都有这个箭头呢，不应该整个界面只有一个吗，可不可以为小小的我解答一下

img

<!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>仿京东左侧菜单栏</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            width: 212px;
            border: 1px solid black;
            margin: 0;
            padding: 0;
        }
          li{
            height: 30px;
            line-height: 30px;
            color: white;
            font-size: 14px;
            background:url(./img/jt.jpeg) no-repeat 191px center;
            background-color: #c81623;
        }
        #top{
            height: 45px;
            line-height: 45px;
            font-family:"宋体";
            background-color: #b1191a;
            text-indent: 20px;
        }
        </style>
      </head<
<body>
     <ul>
        <li id="top"><h3>全部商品分类</h3></li>
        <li>家用电器</li>            
        <li>手机、数码、京东通信</li>
        <li>电脑、办公</li>
        <li>家居、家具、家装、厨具</li>
        <li>男装、女装、珠宝</li>
        <li>个护化妆</li>
        <li>鞋靴、箱包、钟表、奢侈品</li>
        <li>运动户外</li>
      </ul>
</body>
</html>

上点代码 感觉你是不是把类名用的相同 都被设置背景图片了

背景图片太小，设置了no-repeat后就编程这样了吧

看下你的代码

因为你的背景图设置给了每一行吧

审查元素看看呗 。大概率 设置背景有问题

你写了很多li，css样式当中你给li都加了背景图，那肯定每一行都有箭头，你想让这个箭头出现在哪里，你就把这个背景图放到哪里，或者你想让箭头出现在第一行，你可以在样式当中li后面加 li:first-child 或者 li:nth-child(1)