大学项目中如何将Header内的Logo移至左上角？

你的<header>使用了display: flex布局，flex容器内的子元素会忽略float属性，所以用float: left无法实现Logo居左的效果。结合你的需求，调整代码如下：

修改后的CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,500;1,400&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #F5F5F5;
}

li,
a,
button {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #000000;
  text-decoration: none;
}

header {
  display: flex;
  align-items: center;
  gap: 20px; /* 控制元素间的间距 */
  padding: 10px 10%; /* 修正padding与height的冲突，移除固定height让header自适应 */
  background: linear-gradient(rgba(165, 246, 144, 0.3) 0%, rgba(158, 249, 216, 0.63) 100%);
}

/* 调整标题样式，移除绝对定位 */
.header-title {
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 34px;
  color: #000000;
  background: transparent; /* 继承header的渐变背景 */
}

.logo {
  height: 56px; /* 设置与header适配的高度，避免溢出 */
}

/* 导航栏靠右排列 */
.nav__links {
  margin-left: auto; /* 让导航栏挤到右侧 */
}

.nav__links ul {
  display: flex;
  list-style: none;
  gap: 20px;
}

.cta button {
  margin-left: 20px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}

修改后的HTML代码 #

<header class="header">
  <img class="logo" src="img/pharmapp.png" alt="PharmApp Logo">
  <p class="header-title">Medicines on your Doorstep</p>
  <nav class="nav__links">
    <ul>
      <li><a href="#">Login</a></li>
      <li><a href="#">SignUp</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
  <a class="cta" href="#"><button>Contact</button></a>
</header>

核心调整说明 #

1. 利用flex布局的默认流式排列（从左到右），Logo作为第一个子元素自然居左
2. 用margin-left: auto让导航栏和Contact按钮自动靠右，替代justify-content: space-between的生硬分散
3. 移除所有无效的float、错误的绝对定位和重复的background属性
4. 修正HTML的语法错误（闭合<a>标签），并给元素添加更语义化的类名

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