将标题重写为：如何将我的标志放置在页眉的左上角？

Question

我正在为我的大学项目设计一个标题，其中标志应该位于左上角。我尝试使用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;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  background: linear-gradient(rgba(165, 246, 144, 0.3) 0%, rgba(158, 249, 216, 0.63) 100%);
  height: 56px;
}

p {
  position: absolute;
  width: 584px;
  height: 67px;
  left: 232px;
  top: 25px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  background: url(pharmapp.png);
  align-items: center;
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 34px;
  color: #000000;
}

.logo {
  position: relative;
  float: left;
  margin-block-start: 10px;
  background: url(pharmapp.png);
  height: 122px;
  left: 20px;
  top: 0px;
  bottom: 40px;
}

<header class="header">
  <img class="logo" src="img/pharmapp.png" alt="logo">
  <p class="p">Medcines 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>

Answer 1

只需将您的.logo元素和p标签放在一个div中。它会自动排序。

您还忘记了在按钮周围关闭a标签。

在布局中不要使用浮动或绝对定位，除非您知道自己在做什么...

@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;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  background: linear-gradient(rgba(165, 246, 144, 0.3) 0%, rgba(158, 249, 216, 0.63) 100%);
  height: 56px;
}

/* p {
  position: absolute;
  width: 584px;
  height: 67px;
  left: 232px;
  top: 25px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  background: url(pharmapp.png);
  align-items: center;
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 34px;
  color: #000000;
} */

.logo {
/*  position: relative;
  float: left;*/
  margin-block-start: 10px;
  background: url(pharmapp.png);
  height: 122px;
/*  left: 20px;
  top: 0px;
  bottom: 40px;*/
}

<header class="header">
  <div>
    <img class="logo" src="img/pharmapp.png" alt="logo">
    <p class="p">Medicines on your Doorstep</p>
  </div>
  <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>

Answer 2

您的header具有padding: 30px 10%，这意味着header的左右两侧会有10%的填充，然后在.logo中，您将起始位置设置为距离左侧20px。

一种“修复”它的方法是通过left: calc(-10% + 20px);来使.logo的left处于负位置。

@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;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  background: linear-gradient(rgba(165, 246, 144, 0.3) 0%, rgba(158, 249, 216, 0.63) 100%);
  height: 56px;
}

p {
  position: absolute;
  width: 584px;
  height: 67px;
  left: 232px;
  top: 25px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  background: url(pharmapp.png);
  align-items: center;
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 34px;
  color: #000000;
}

.logo {
  position: relative;
  float: left;
  margin-block-start: 10px;
  background: url(pharmapp.png);
  height: 122px;
  /*you can play with the numbers here*/
  left: calc(-10% + 20px);
  top: 0px;
  bottom: 40px;
}

<header class="header">
  <img class="logo" src="img/pharmapp.png" alt="logo">
  <p class="p">Medcines 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>