HTML导航条前面怎么加图片

img


如图

听你这意思，你是想把图片当做导航栏的一个选项，和其他选项间距一致

img

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
    body{
        padding: 0;
        margin: 0;
    }
        .daohang{
            width: 100vw;
            height: 100px;
            background: #cccccc;
            border: 1px solid red;
            padding-left: 10%;
        }
        .bar{
            display: flex;
            width: 50%;
            height: 100%;
            align-items: center;
            justify-content: space-around;
        }
        img{
            width: 100px;
            height: 300px;
        }
    </style>
    <body>
        <div class="daohang">    
            <div class="bar">
                <img src="./img/图片.jpg" >
                <span>菜单1</span>
                <span>菜单2</span>
                <span>菜单3</span>
            </div>
        </div>
    </body>
</html>

导航条设置相对定位，图片设置绝对定位，这样图片绝对定位的基准点就是导航条的左上角了