修复后台管理网站中管理员头像与名称的位置异常

问题核心是HTML结构错误：.user-wrapper元素未放置在header标签内部，导致它被渲染在header下方的左侧区域，而非与搜索栏共同处于页面右上角。

修复步骤 #

1. 将.user-wrapper代码移动到header标签内部，与.search-wrapper并列
2. 利用header已有的display: flex和justify-content: space-between属性，自动实现左侧标题、右侧搜索栏+用户区域的分隔布局

修改后完整HTML代码 #

<!DOCTYPE html>
<html lang="eng">

<head>
  <meta charset="UTF-8">
  <title>Bibliotekos administracija</title>
  <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="sidebar">
    <div class="sidebar-brand">
      <h2><span class="lab la-accusoft"></span> Biblioteka</h2>
    </div>

    <div class="sidebar-menu">
      <ul>
        <li>
          <a href="" class="active"><span class="las la-home"></span>
                <span>Pradžia</span></a>
        </li>
        <li>
          <a href=""><span class="las la-clipboard"></span>
                <span>Knygų sąrašas</span></a>
        </li>
        <li>
          <a href=""><span class="las la-book"></span>
                <span>Paimtos knygos</span></a>
        </li>
      </ul>
    </div>
  </div>

  <div class="main-content">
    <header>
      <h2>
        <label for="">
                    <span class="las la-bars" ></span>
                </label> Pradžia
      </h2>

      <div class="header-right">
        <div class="search-wrapper">
          <span class="las la-search"></span>
          <input type="search" placeholder="Search here" />
        </div>

        <div class="user-wrapper">
          <img src="img/among.jpg" width="40px" height="40px" alt="">
          <div>
            <h4>Administracija</h4>
          </div>
        </div>
      </div>
    </header>

    <main>
      <div class="cards">
        <div class="card-single">
          <div>
            <h1>0</h1>
            <span>Knygų</span>
          </div>
          <div>
            <span class="las la-books"></span>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>
</html>

可选优化（提升右侧区域布局） #

若希望搜索栏与用户区域间距更合理，可给它们添加外层容器并补充CSS：

.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

修改完成后，管理员头像与名称将和搜索栏一同显示在页面右上角，符合预期布局。

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