如何仅用HTML和CSS在网站导航栏左侧添加头像

实现思路 #

通过调整HTML结构添加头像元素，配合Flex布局实现头像与导航项的对齐，确保头像固定在网页左上角。

修改后的完整代码 #

<!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>PS 2</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box; /* 避免内边距导致布局溢出 */
        }

        header{
            background-color: black;
            color: white;
            position: sticky;
            top: 0;
            display: flex;
            align-items: center; /* 垂直居中导航元素 */
            padding: 10px 19px;
        }
        ul{
            display: flex;
            align-items: center;
            gap: 53px; /* 精准控制导航项间距 */
        }
        li{
            list-style: none;
            font-size: 33px;
        }
        /* 头像专属样式 */
        .nav-avatar img{
            width: 50px;
            height: 50px;
            border-radius: 50%; /* 可选：设置圆形头像 */
            margin-right: 20px; /* 与Home选项保持间距 */
        }
        .container{
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: space-between;
        }
        .left{
            background-color: red;
            height: 80vh;
            width: 40vw;
        }
        .right{
            background-color: blue;
            height: 80vh;
            width: 40vw;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <!-- 新增头像元素 -->
                <li class="nav-avatar">
                    <img src="你的头像路径" alt="个人头像">
                </li>
                <li>Home</li>
                <li>About</li>
                <li>Contact Us</li>
            </ul>
        </nav>
    </header>
    <div class="container">
        <div class="left">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis consequuntur porro recusandae beatae, debitis sapiente, adipisci nostrum voluptate pariatur veniam, aliquid iusto consequatur nemo quidem. Quia eveniet fugit mollitia tempora harum eligendi modi natus?
            </p>
        </div>
        <div class="right">
            <p>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim, totam sapiente unde quos, quia dolor et natus tenetur, nesciunt tempora cum. Facilis laboriosam quas consectetur, placeat adipisci consequuntur consequatur cupiditate deserunt veritatis odit natus delectus tempore possimus, aspernatur ex amet quaerat vero sequi praesentium inventore. Facere distinctio magni, praesentium modi nemo sit quibusdam laudantium molestiae. Provident.
            </p>
        </div>
    </div>
</body>
</html>

关键调整说明 #

1. HTML结构：在导航列表最前方添加带类名的头像列表项，用于单独控制样式
2. CSS布局：
   • 用flex重构导航栏，确保头像与导航项垂直居中对齐
   • 用gap替代列表项内边距，更精准控制导航项间距
   • 设置头像固定尺寸，可选圆形样式，通过margin-right控制与Home选项的间距
   • 新增box-sizing: border-box避免布局溢出问题

内容的提问来源于stack exchange，提问作者Shresth Gour