我正在为我的大学项目设计一个标题，其中标志应该位于左上角。我尝试使用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>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
只需将您的
.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>您的
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>