將標題重寫為：如何將我的標誌放置在頁眉的左上角？

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>